vue后臺(tái)返回base64圖片無法顯示的解決
更新時(shí)間：2022年06月14日 11:42:19 作者：Zxiuping
這篇文章主要介紹了vue后臺(tái)返回base64圖片無法顯示的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue后臺(tái)返回base64圖片無法顯示
關(guān)于后臺(tái)接口返回的圖片base64格式頁面無法顯示的問題，我遇到的原因是因?yàn)榉祷氐囊淮畠?nèi)容里面存在空格或者換行的原因
解決方法如下
let str = `data:image/jpg;base64,${res.imgStr}`
? ? ? ? this.mpId = str.replace(/[\r\n]/g, '')let str = `data:image/jpg;base64,${res.imgStr}`
this.mpId = str.replace(/[\r\n]/g, '')這樣界面就能顯示圖片啦。
vue中base64轉(zhuǎn)圖片格式
// 拍照獲取圖片base64
// imgsrc: base64圖片資源
refreshDataList (imgsrc) {
let data = this.baseImg(imgsrc)
console.log(data)
},
// base64轉(zhuǎn)圖片資源
baseImg (dataurl) {
var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new Blob([u8arr], {type: mime})
},以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
前端架構(gòu)vue動(dòng)態(tài)組件使用基礎(chǔ)教程
這篇文章主要為大家介紹了前端架構(gòu)vue動(dòng)態(tài)組件使用的基礎(chǔ)教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步早日升職加薪2022-02-02
詳解Vue用axios發(fā)送post請(qǐng)求自動(dòng)set cookie
本篇文章主要介紹了Vue用axios發(fā)送post請(qǐng)求自動(dòng)set cookie，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-05-05
基于vue.js仿淘寶收貨地址并設(shè)置默認(rèn)地址的案例分析
這篇文章主要介紹了基于vue.js仿淘寶收貨地址并設(shè)置默認(rèn)地址的案例分析,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-08-08
ant-design-vue動(dòng)態(tài)表格合并案例
這篇文章主要介紹了ant-design-vue動(dòng)態(tài)表格合并案例，文章圍繞主題通過案例詳解展開相關(guān)內(nèi)容，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-08-08
vue中使用animate.css實(shí)現(xiàn)炫酷動(dòng)畫效果
這篇文章主要介紹了vue中使用animate.css實(shí)現(xiàn)動(dòng)畫效果,我們使用它，只需要寫很少的代碼，就可以實(shí)現(xiàn)非常炫酷的動(dòng)畫效果，感興趣的朋友跟隨小編一起看看吧2022-04-04
這篇文章主要為大家介紹了Vue之Axios異步通信，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
Ruoyi-Vue處理跨域問題同時(shí)請(qǐng)求多個(gè)域名接口(前端處理方法)
跨域問題一直都是很多人比較困擾的問題,這篇文章主要給大家介紹了關(guān)于Ruoyi-Vue處理跨域問題同時(shí)請(qǐng)求多個(gè)域名接口的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-05-05
vue?elementUI之this.$confirm的使用方式
這篇文章主要介紹了vue?elementUI之this.$confirm的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-08-08
打通前后端構(gòu)建一個(gè)Vue+Express的開發(fā)環(huán)境
這篇文章主要介紹了打通前后端構(gòu)建一個(gè)Vue+Express的開發(fā)環(huán)境，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
Vue實(shí)現(xiàn)移動(dòng)端頁面切換效果【推薦】
這篇文章主要介紹了Vue實(shí)現(xiàn)移動(dòng)端頁面切換效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-11-11