文件、圖片在后端主要以兩種方式存儲：

1.保存在服務(wù)器上，數(shù)據(jù)庫中存儲的是該文件、圖片的地址；

2.將文件、圖片轉(zhuǎn)為二進制流，數(shù)據(jù)庫中存儲的是對應(yīng)的二進制流。

針對第一種情況的話，直接請求接口獲取到對應(yīng)的URL地址，賦值給src即可。

第二種的話需要轉(zhuǎn)換一下，請求接口獲取的是二進制流，在控制臺看到的會是一堆亂碼，由于responseType默認返回的是json數(shù)據(jù)，需要將它轉(zhuǎn)為blob對象，然后使用blob的API生成臨時的URL地址，來顯示對應(yīng)的文件、圖片。

實現(xiàn)代碼：

1.在請求接口的時候加一句話：

responseType: ‘blob‘,

2.將返回的信息轉(zhuǎn)換為blob對象之后，生成臨時的URL地址：

this.src = URL.createObjectURL(res.data);

此時取得的變量src就是要預(yù)覽的文件、圖片的URL地址，就可以正常顯示了。

注意：

1.該實現(xiàn)代碼是針對第二種返回的情況，若是直接返回的URL地址，則不需要做這些操作，接口返回的值直接賦值給src就可以了。

2.文件、圖片本質(zhì)上來說是一樣的，都是通過URL來訪問，預(yù)覽，下載。

3.responseType: ‘blob‘,的添加位置：

原文：https://www.cnblogs.com/5201314m/p/12693335.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的html怎么显示返回的图片,想要预览文件或是图片，将后端返回的信息转换为前端可以正常显示的格式...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。