从 API 获取图像

Question

Q1) 在我的 reactjs 应用程序中，我试图从我的后端 Nodejs 服务器获取 API。 API 根据请求以图像文件响应。

我可以在 http://192.168.22.124:3000/source/592018124023PM-pexels-photo.jpg 上访问和查看图像文件

但是在我的 reactjs 客户端中，我在控制台日志中收到了这个错误。

未捕获（承诺）SyntaxError：JSON 中位置 0 的意外标记

反应：

 let fetchURL = 'http://192.168.22.124:3000/source/';
  let image = name.map((picName) => {
    return picName
  })

  fetch(fetchURL + image)
  .then(response => response.json())
  .then(images => console.log(fetchURL + images));

节点：

 app.get('/source/:fileid', (req, res) => {
const { fileid } = req.params;
res.sendFile(__dirname + /data/ + fileid);
});

有没有比我上面做的更好的方法？

Q2） 另外，我如何为一个空变量（位于获取函数之外）赋值

jpg = fetchURL + 图片；所以我可以在某个地方访问它。

原文由 JKhan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

服务器的响应是一个二进制文件，而不是 JSON 格式的文本。您需要将响应流作为 Blob 读取。

 const imageUrl = "https://.../image.jpg";

fetch(imageUrl)
  //                         vvvv
  .then(response => response.blob())
  .then(imageBlob => {
      // Then create a local URL for that image and print it
      const imageObjectURL = URL.createObjectURL(imageBlob);
      console.log(imageObjectURL);
  });

原文由 maxpaj 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

相当于@maxpaj 的解决方案，但使用异步和等待。

 async function load_pic() {

        const url = '<REPLACE-WITH-URL>'

        const options = {
            method: "GET"
        }

        let response = await fetch(url, options)

        if (response.status === 200) {

            const imageBlob = await response.blob()
            const imageObjectURL = URL.createObjectURL(imageBlob);

            const image = document.createElement('img')
            image.src = imageObjectURL

            const container = document.getElementById("your-container")
            container.append(image)
        }
        else {
            console.log("HTTP-Error: " + response.status)
        }
    }

原文由 eric.mcgregor 发布，翻译遵循 CC BY-SA 4.0 许可协议