从 API 获取图像

IT技术 javascript node.js reactjs
2021-03-23 17:57:43

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

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

但是在我的 reactjs 客户端,我在控制台日志中收到此错误。

Uncaught (in promise) SyntaxError: Unexpected token in JSON at position 0

react:

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)另外,我怎样才能给一个空变量赋值(它位于 fetch 函数之外)
jpg = fetchURL + images; 所以我可以在某个地方访问它。

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);
  });
您可以将 blob 保存为本地存储中的 Base64 编码字符串。查看stackoverflow.com/questions/18650168/convert-blob-to-base64
2021-06-03 17:57:43
我现在如何访问图像文件 url?当我点击 localhost:3001/613348fe-52e4-4baa-8e76-e48332494e19 时,我被重定向到我的注册页面。
2021-06-04 17:57:43
我在控制台日志中得到了这个:192.168.22.124:3000/source/[object Blob]
2021-06-05 17:57:43
是的,因为images现在确实是一个 Blob。基本上是一个文件。然后,您可以使用var url = URL.createObjectURL(images)为该图像创建 URL。
2021-06-06 17:57:43
现在我明白了: blob: localhost:3001/613348fe-52e4-4baa-8e76-e48332494e19我还缺少什么吗?
2021-06-20 17:57:43