如何在 React.js 中显示从 API 检索到的二值图像？
How to display binary images retrieved from API in React.js?
✨大家好！✨
一般问题：
我有一个网络应用程序，其中包含大约 50 张图像，在用户登录该网站之前不应访问这些图像。我怀疑这应该是一个简单的答案，有很多网站也需要这种基本保护。也许我在这里不知道 google 的正确用词，但我遇到了一些麻烦。感谢任何帮助。
应用详情：
我的网络应用程序是用 typescript react 构建的，带有一个节点。js/express/mongoDB 后端。相当典型的东西。
我尝试过的：
到目前为止，我最好的想法是将它们上传到托管在 heroku 上的后端服务器上的 public 文件夹中。然后，我使用身份验证中间件将图像保护到任何包含“/images/”的 url。这部分有效。当我使用身份验证 header 从邮递员那里调用 api 时，我能够看到图像。但是我想不出一种方法来在我的反应网络应用程序中显示该图像。这是我使用的基本调用。
fetch(url,
{
headers: {
Authorization:token,
},
}
);
然后当我尝试复制它时，实际响应只是一个空 object
{}
但是当我控制台记录纯响应时我也得到了这个，某种可读流：
来自关注 related question
我想到了以下内容：（通常包含在 asyc 函数中）
const image = await fetch(url,{headers:{ Authorization:token}});
const theBlob = await image.blob();
console.log(URL.createObjectURL(theBlob));
这给了我 link: http://localhost:3000/b299feb8-6ee2-433d-bf05-05bce01516b3 只显示一个空白页。
非常感谢任何帮助！谢谢！
没错，您发送了身份验证令牌，后端使用它来对用户进行身份验证（检查他是否存在于数据库中，他是否具有正确的角色并检查 jwt）
如果以上为真，服务器仅响应图像
如果您的服务器正在响应一个空对象，那么问题出在后端而不是前端，console.log您发送到前端的内容
经过大量工作试图了解发生了什么，这是我自己的答案：
const image = await axios(url, { responseType: "blob", headers: {Authorization: token }});
const srcForImage = URL.createObjectURL(image.data)
为什么现在有意义
所以我不明白正在发生的事情的内部运作。请指正，以下是我的理解：
所以图像是以二进制形式发送的。我必须做的是将 axios 中的 reponseType 设置为“blob”，然后发送一个 blob，我相信这意味着它的 base 64 编码。然后函数 URL.createObjectURL 做了一些魔术，必须将它作为页面的一部分保存到浏览器。然后我们可以将其用作图像 url。当你自己访问它时，你必须也输入它给你的 url 的 'blob:' 部分，否则它是空白的，或者将它粘贴在 <img src={srcForImage}/> 中并且效果很好。我敢打赌它会在问题的原始提取示例中起作用，我只是从不将 url 放在标签中或将 'blob:' 作为 URL.[=12= 的一部分包含在内]
✨大家好！✨
一般问题：
我有一个网络应用程序，其中包含大约 50 张图像，在用户登录该网站之前不应访问这些图像。我怀疑这应该是一个简单的答案，有很多网站也需要这种基本保护。也许我在这里不知道 google 的正确用词，但我遇到了一些麻烦。感谢任何帮助。
应用详情：
我的网络应用程序是用 typescript react 构建的，带有一个节点。js/express/mongoDB 后端。相当典型的东西。
我尝试过的：
到目前为止，我最好的想法是将它们上传到托管在 heroku 上的后端服务器上的 public 文件夹中。然后，我使用身份验证中间件将图像保护到任何包含“/images/”的 url。这部分有效。当我使用身份验证 header 从邮递员那里调用 api 时，我能够看到图像。但是我想不出一种方法来在我的反应网络应用程序中显示该图像。这是我使用的基本调用。
fetch(url,
{
headers: {
Authorization:token,
},
}
);
然后当我尝试复制它时，实际响应只是一个空 object
{}
但是当我控制台记录纯响应时我也得到了这个，某种可读流：
来自关注 related question
我想到了以下内容：（通常包含在 asyc 函数中）
const image = await fetch(url,{headers:{ Authorization:token}});
const theBlob = await image.blob();
console.log(URL.createObjectURL(theBlob));
这给了我 link: http://localhost:3000/b299feb8-6ee2-433d-bf05-05bce01516b3 只显示一个空白页。
非常感谢任何帮助！谢谢！
没错，您发送了身份验证令牌，后端使用它来对用户进行身份验证（检查他是否存在于数据库中，他是否具有正确的角色并检查 jwt）
如果以上为真，服务器仅响应图像
如果您的服务器正在响应一个空对象，那么问题出在后端而不是前端，console.log您发送到前端的内容
经过大量工作试图了解发生了什么，这是我自己的答案：
const image = await axios(url, { responseType: "blob", headers: {Authorization: token }});
const srcForImage = URL.createObjectURL(image.data)
为什么现在有意义
所以我不明白正在发生的事情的内部运作。请指正，以下是我的理解：
所以图像是以二进制形式发送的。我必须做的是将 axios 中的 reponseType 设置为“blob”，然后发送一个 blob，我相信这意味着它的 base 64 编码。然后函数 URL.createObjectURL 做了一些魔术，必须将它作为页面的一部分保存到浏览器。然后我们可以将其用作图像 url。当你自己访问它时，你必须也输入它给你的 url 的 'blob:' 部分，否则它是空白的，或者将它粘贴在 <img src={srcForImage}/> 中并且效果很好。我敢打赌它会在问题的原始提取示例中起作用，我只是从不将 url 放在标签中或将 'blob:' 作为 URL.[=12= 的一部分包含在内]