как вы используете Axios для создания предварительного просмотра страницы в React?

#reactjs #image #axios #fetch

#reactjs #изображение #аксиос #выборка

Вопрос:

Я никогда раньше не использовал Axios, и я новичок в fetch Api, могу ли я получить несколько советов о том, как отобразить предварительный просмотр URL-адреса на веб-сайте?

Лучшее, что у меня есть в качестве примера кода, который я хотел бы получить, приведено ниже:

В нерабочем коде я использовал fetch API, чтобы попытаться изменить состояние coverImageURL на изображение ссылки, по которой будет сделан щелчок (boards). Хотя это не работает.

  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.log(coverImageUrl)
  })

 },[bool])

1. Что такое at /boards ? Изображение или веб-страница?

2. страница текущего веб-сайта. итак, localStorage/boards цель состоит в том, чтобы использовать его как одну из плат в boards/:id в качестве изображения рядом со ссылкой на страницу.

Ответ №1:

Похоже, вам нужен скриншот веб-страницы.

response.blob() не даст вам этого. Это просто двоичное представление всего, что поступает по проводам. В случае HTML преобразование текста HTML в большой двоичный объект не создает никакого изображения. Не только это, но и большинство веб-страниц содержат дополнительный контент, который браузер будет запрашивать для правильного отображения страницы (css / images / API). Одна выборка по URL-адресу страницы не даст вам ничего из этого содержимого, если только оно полностью не встроено. Fetch API не смог бы собрать ничего похожего на вашу веб-страницу, даже если бы он сделал все эти запросы.

Существуют библиотеки предварительного просмотра ссылок (найдите google / github / npm или ознакомьтесь с этой ссылкой), но они просто предоставляют некоторые метаданные и изображение, взятое со страницы. Я уверен, что вы сталкивались с этими предварительными просмотром ссылок в дикой природе.

Если вам нужно показать скриншот веб-страницы, вы можете попробовать что-то вроде Puppeteer, но для этого вам понадобится внутренний сервер, и это даже близко не будет похоже на пользовательский интерфейс в реальном времени с точки зрения задержки…

Редактировать: если содержимое по большей части статично (меняется нечасто), и вам нужны только предварительные просмотры локальных ссылок, вы можете заставить свой сервер сборки сгенерировать эти изображения, используя что-то вроде puppeteer, и сохранить их как ресурсы. В зависимости от ваших потребностей, это может быть одним из вариантов….