AXIOS從伺服器載入圖片並顯示

陳明明發表於2017-12-14

#我的需求

請求傳送:axios 、前段:vue

  1. 伺服器不返回圖片的url地址,返回圖片的資料
  2. 獲取圖片需要登入驗證。 #請求配置 指定響應型別未blob
axios.get(`圖片url`, { responseType: 'blob'})
複製程式碼

#讀取圖片 使用FileReader 的readAsDataURL讀取圖片

let reader = new FileReader()
reader.onload = (e) => {
   this.pic = e.target.result
 }
reader.readAsDataURL(res)
複製程式碼

#使用圖片 將獲取到的字串賦值給img的src即可

< img :src="pic"></img>
複製程式碼

相關文章