ReactJS：无法通过 REST API 响应在 UI 中呈现图像

Question

我已经构建了一个返回图像的 REST API，并且我成功地通过 PostMan 代理获得了它的响应。 在我的 React 代码中，我有这个：

return fetch(url, sInit)
  .then((response) => {
    let blb = new Blob([response.body], { type: 'image/jpeg' });
    let fileUrl = (window.URL || window.webkitURL).createObjectURL(blb);
    window.open(fileUrl);
  })

生成的 blob url 没有图片。我错过了什么？

Answer 1

您可能希望使用fetch 的内置blob() 方法：

fetch(
  'https://images.unsplash.com/35/SRkdurVYQFSFkMyHVwSu_spinnenweb-9536.jpg?dpr=2&auto=compress,format&fit=crop&w=376&h=251&q=80&cs=tinysrgb&crop='
)
  .then(res => res.blob())
  .then(blob => {
    let fileUrl = (window.URL || window.webkitURL).createObjectURL(blob);

    const img = document.createElement('img');
    img.src = fileUrl;
    document.querySelector('body').appendChild(img);
  });