如何在ReactJS中嵌入获取的图像

Question

我的后端基于Django及其REST框架。

我正在通过HTTPresponse提供图像。 由于这些图像包含非常敏感的数据，因此我通过在标头中发送令牌来强制客户端进行身份验证。

该URL类似于www.mywebsite.de/api/images/<id> 。

---

我的前端基于ReactJS。

为了将这些图片嵌入前端，我使用axios来获取它们。 之后，我使用base64对它们进行编码，并将URI放在<img />标签上的src属性中

---

现在，事情是我读了很多base64编码图像的缺点，例如肿的大小，缓存问题等等...此处列出了一些： https ： //medium.com/snapp-mobile/dont-use-base64-encoded -images-on-mobile-13ddeac89d7c

作为初学者，我现在问自己：有哪些替代方案？ 没有Base64的情况下如何嵌入这些图像？ 我不能提供静态网址，这是肯定的。 此外，我无法告诉img标签使用授权标头。

我很高兴能向正确的方向提供任何提示。

先感谢您 ：）

Answer 1

您应该看一下这篇文章 。 综上所述，如果您的图片在公共网站上，则无法100％保护它们。 但是，您可以使用以下实践将风险降低到最低：

• 对特定于图像的类或ID使用background-image css规则。
• 禁用控件，例如使用JS右键单击敏感数据。
• 配置robots.txt服务器文件，以使搜索引擎不会浏览敏感数据。
• 看一下阻止用户交互的JS插件，就像javascript视频播放器一样。

但是请注意，这些解决方案都不是100％可靠的。 例如，可以通过检查html并将其解码来复制粘贴base64字符串。