如何在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字符串。