后端返回Blob圖片數據，前端如何正確顯示？

后端返回blob圖片數據，前端如何正確顯示？

在前端開發中，經常需要顯示后端返回的圖片數據。如果后端返回的是Blob類型的圖片數據，直接在

一種常見的解決方案是：后端將Blob數據轉換為Base64編碼的字符串再返回給前端。 Base64編碼將二進制數據轉換為文本格式，前端可以直接使用這個Base64字符串作為標簽的src屬性值。

例如，后端可以使用相應的庫函數將Blob數據轉換為Base64字符串，并將其作為響應體的一部分返回。前端收到Base64字符串后，可以使用如下代碼顯示圖片：

// 假設后端返回的Base64字符串存儲在變量base64Image中 const img = document.createElement('img'); img.src = `data:image/png;base64,${base64Image}`; // 根據實際圖片類型調整'image/png' document.body.appendChild(img);

data:image/png;base64, 是Base64數據的標識符，image/png 需要根據圖片的實際MIME類型（例如image/jpeg）進行調整。 將后端返回的Base64字符串添加到標識符之后，即可在標簽中正確顯示圖片。 這種方法簡化了前端代碼，提高了開發效率。 但是需要注意的是，Base64編碼后的數據體積大約會增加三分之一，傳輸效率略低。 對于大型圖片，建議考慮其他更優方案，例如直接使用URL或使用更高效的二進制數據處理方法。

立即學習“前端免費學習筆記（深入）”；