關於后端傳給前端圖片的二進制流展示問題【data:image/png;base64】

根據后端傳入的圖片二進制流，前端需要展示，如下圖紅框所示：

 如何將這段二進制流展示在頁面中呢，首先我們需要了解一下網頁上有些圖片的src或css背景圖片的url后面跟了一大串字符，如下圖：

這是Data URI scheme。

Data URI scheme是在RFC2397中定義的，目的是將一些小的數據，直接嵌入到網頁中，從而不用再從外部文件載入。比如上面那串字符，其實是一張小圖片，將這些字符復制黏貼到火狐的地址欄中並轉到，就能看到它了，一張1X36的白灰png圖片。

在上面的Data URI中，data表示取得數據的協定名稱，image/png 是數據類型名稱，base64 是數據的編碼方法，逗號后面就是這個image/png文件base64編碼后的數據。

目前，Data URI scheme支持的類型有：

data:,文本數據
data:text/plain,文本數據
data:text/html,HTML代碼
data:text/html;base64,base64編碼的HTML代碼
data:text/css,CSS代碼
data:text/css;base64,base64編碼的CSS代碼
data:text/javascript,Javascript代碼
data:text/javascript;base64,base64編碼的Javascript代碼
data:image/gif;base64,base64編碼的gif圖片數據
data:image/png;base64,base64編碼的png圖片數據
data:image/jpeg;base64,base64編碼的jpeg圖片數據
data:image/x-icon;base64,base64編碼的icon圖片數據

注意：SVG的圖片前面加上：data:image/svg+xml;base64,【逗號不能少】

下面展示實際代碼的應用：

  //獲取icon列表
   async getIcon() {
        let { data } = await getIcon()
        for (let item of data) {
          let icon = ""
          if (item.type == "svg") {
           // svg格式類型
            icon = "data:image/svg+xml;base64," + item.content
          } else{
            //其他類型
            icon = "data:image/png;base64," + item.content
          }
          let obj = {
            type: item.type,
            name: item.name,
            icon: icon
          }
          this.iconList.push(obj)
        }
   }

頁面中展示如下：