您如何使用Axios在React中创建页面预览？

debugcn 发表于 Dev

亚历山大·海明

我以前从未使用过Axios，并且我不熟悉Api，请问如何在网站中显示URL预览的建议？

下面是我想要的最好的代码示例：

在不起作用的代码中，我使用了访存API来尝试将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.log(coverImageUrl)
  })

 },[bool])

亚伯拉罕·拉夫科夫斯基

听起来您想要网页的屏幕截图。

response.blob()不会给你的。它只是任何东西的Blob表示。对于HTML，将HTML文本转换为Blob不会创建任何类型的图像。不仅如此，大多数网页还包含浏览器要求提供的其他内容，以正确呈现页面（css / images / API）。一次获取页面URL不会让您获得任何内容，除非全部内联了。即使抓取API确实发出了所有这些请求，也无法汇编任何类似于您的网页的内容。

那里有链接预览器库（搜索google / github / npm或查看此链接），但是这些库仅提供一些元数据和从页面获取的图像。我相信您已经在野外碰到了这些链接预览。

如果必须显示网页的屏幕截图，则可以尝试使用Puppeteer之类的方法，但是您将需要使用后端服务器，并且就延迟而言，它几乎类似于实时用户体验...

编辑：如果大多数情况下内容是静态的（很少更改），并且您只需要预览本地链接，则可以让构建服务器使用puppeteer之类的东西生成这些图像并将其保存为资产。根据您的需要，可以选择...。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。