从API获取图像

Question

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

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

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

未捕获（承诺）SyntaxError：意外令牌-JSON中位置0

Reactjs：

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));

Nodejs：

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

有什么比我上面做的更好的方法吗？

Q2） 另外，如何为空变量（位于fetch函数外部）分配值
jpg = fetchURL +图片；所以我可以在某个地方访问它。

Answer 1

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

var outside

fetch(fetchURL + image)
  //                         vvvv
  .then(response => response.blob())
  .then(images => {
      // Then create a local URL for that image and print it 
      outside = URL.createObjectURL(images)
      console.log(outside)
  })