Как вы используете Axios для создания предварительного просмотра страницы в React?
Я никогда раньше не использовал Axios, и я новичок в API-интерфейсе fetch. Могу ли я посоветовать, как отобразить предварительный просмотр URL-адреса на веб-сайте?
Лучшее, что у меня есть в качестве примера кода, который я хотел бы, приведен ниже:
В неработающем коде я использовал API-интерфейс fetch, чтобы попытаться изменить состояние coverImageURL на изображение ссылки, по которой будут нажимать (доски). Хотя это не работает.
useEffect(()=>{
setDigit({ id:mapper.length +1,
text:JSON.stringify(myRef.current.innerHTML)
});
fetch("/boards")
// vvvv
.then(response => response.blob())
.then(images => {
setCoverImageUrl(URL.createObjectURL(images));
console.info(coverImageUrl)
})
},[bool])
страницу текущего сайта. поэтому localStorage/boards цель состоит в том, чтобы использовать его как одну из досок в boards/:id как изображение рядом со ссылкой на страницу.
Ответы 1
Похоже, вам нужен скриншот веб-страницы.
response.blob() не даст вам этого. Это просто представление Blob всего, что приходит по сети. В случае HTML преобразование HTML-текста в Blob не создает никакого изображения. Мало того, большинство веб-страниц имеют дополнительный контент, который браузер запрашивает для правильного отображения страницы (css/images/API). Одно обращение к URL-адресу страницы не даст вам ничего из этого контента, если только он не встроен. Fetch API не смог собрать ничего похожего на вашу веб-страницу, даже если он сделал все эти запросы.
Существуют библиотеки предварительного просмотра ссылок (поищите в google/github/npm или посмотрите эту ссылку), но они просто предоставляют некоторые метаданные и изображение, взятое со страницы. Я уверен, что вы сталкивались с этими превью ссылок в дикой природе.
Если вам нужно показать скриншот веб-страницы, вы можете попробовать что-то вроде Puppeteer, но для этого вам понадобится внутренний сервер, и это будет совсем не похоже на работу пользователя в реальном времени с точки зрения задержки...
Редактировать: если контент по большей части статичен (меняется нечасто), и вам нужны только предварительные просмотры локальных ссылок, вы можете настроить сервер сборки для создания этих изображений с помощью чего-то вроде puppeteer и сохранить их как активы. В зависимости от ваших потребностей, это может быть вариант....
жаль, что нет варианта только для переднего конца.
Что находится в
/boards? Изображение или веб-страница?