如何在 React.js 中显示从 API 检索到的二进制图像？答案

【问题标题】：How to display binary images retrieved from API in React.js?如何在 React.js 中显示从 API 检索到的二进制图像？
【发布时间】：2021-10-03 15:13:33
【问题描述】：

✨大家好！✨

一般问题：

我有一个网络应用程序，其中包含大约 50 张图像，在用户登录网站之前应该无法访问这些图像。我怀疑这应该是一个简单的答案，有很多网站也需要这种基本保护。也许我不知道在这里谷歌的正确词，但我遇到了一些麻烦。任何帮助表示赞赏。

应用详情：

我的网络应用程序内置在 typescript react 中，带有 node.js/express/mongoDB 后端。相当典型的东西。

我尝试过的：

到目前为止，我最好的想法是将它们上传到托管在 heroku 上的后端服务器上的公共文件夹中。然后，我使用身份验证中间件将图像保护到任何包含“/images/”的url。这部分有效。当我使用身份验证标头从邮递员调用 api 时，我能够看到图像。但是我想不出一种在我的反应网络应用程序中显示该图像的方法。这是我使用的基本调用。

fetch(url,
        {
            headers: {
                Authorization:token,
            },
        }
    );

然后当我尝试复制它时，实际响应只是一个空对象 {} 但是当我控制台记录纯响应时，我也会得到这个，某种可读流：

来自关注related question

我想出了以下内容：（通常包含在 asyc 函数中）

const image = await fetch(url,{headers:{ Authorization:token}}); 
const theBlob = await image.blob();
console.log(URL.createObjectURL(theBlob));

这给了我链接：http://localhost:3000/b299feb8-6ee2-433d-bf05-05bce01516b3，它只显示一个空白页。

非常感谢任何帮助！谢谢！ ????

【问题讨论】：

标签： node.js reactjs image heroku frontend

【解决方案1】：

没错，您发送身份验证令牌，后端使用该令牌对用户进行身份验证（检查他是否存在于数据库中，他是否具有正确的角色并检查 jwt）

如果上述情况属实，服务器仅响应图像

如果您的服务器响应的是一个空对象，那么问题出在后端而不是前端，console.log 您发送到前端的内容

【讨论】：

服务器正在使用邮递员中的图像进行响应，但是当我在前端 console.log 时，响应只是这篇文章中带有可读流的图像，如果我尝试字符串化它，它变成了一个空对象。
您可以通过控制台记录 res.data 吗？它是 const image = await 下面的 console.log(image.data)
好的，所以我改用 axios 并记录 image.data，我的反应是一团糟，我假设是二进制的。

【解决方案2】：

经过大量工作试图了解发生了什么，在这里是我自己的答案：

const image = await axios(url, { responseType: "blob", headers: {Authorization: token }}); 
const srcForImage = URL.createObjectURL(image.data)

为什么现在有意义

所以我不明白正在发生的事情的内部运作。请纠正我，但以下是我的理解：

所以图像是以二进制形式发送的。我必须做的就是将 axios 中的响应类型设置为“blob”，然后发送一个 blob，我相信这意味着它的 base 64 编码。然后函数 URL.createObjectURL 做了一些魔术，并且必须将其作为页面的一部分保存到浏览器中。然后我们可以将其用作图像 url。当您自己访问它时，您也必须输入它提供给您的 url 的“blob：”部分，否则它是空白的，或者将其粘贴在 <img src={srcForImage}/> 中，效果很好。我敢打赌它会在问题的原始提取示例中起作用，我只是从未将 url 放在标签中或将“blob：”作为 URL 的一部分。

【讨论】：