1. 程式人生 > >vue 圖片路徑 和 base64 圖片

vue 圖片路徑 和 base64 圖片

切換圖片路徑

問題:在專案中遇到一個問題:請求回來的列表資料,有的沒有圖片(url為空),需要切換為本地圖片路徑

 

解決:

1、在js或vue檔案中匯入需要替換的本地圖片

  

var imgUrl = require('../../assets/image/customerPromote/customer_img3.png') 或: import imgUrl from '../../assets/image/customerPromote/customer_img3.png'

2、

 替換圖片

for (let i = 0; i < list.length; i++) {
          
if (list[i].actionImage == '') { var imgUrl = require('../../assets/image/customerPromote/customer_img3.png') list[i].actionImage = list[i].actionImage.replace('', imgUrl) } }

 

base64的優點

base64圖片格式

src="data:image/png;base64,編碼"

  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAIAAACQKrqGAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAB8ElEQVR42mMQgAEhQYEgNeVua+OVzpZrnSxm2phk6qjLi4rAFTBAKDNZqT3+rvdCPO4Fu98LdL0b4HLX3/mun+NlX/t4TVWEUiNpiZMBTrdD3KFKg9zgSu/6OtzxcczUVgUrFRRMz/U97Wt/DSiNYepdH4c73vY3vGzNpSUZxOy0DKfFr/CzvejrcCPI7eGi2YdOPtp+6tXd87vvL/F/ttDi3QrzL+st93QaMUhnOCktTQmvCjroaX1v4ey6VV/8e7/69X6NnvL1+s1bv/c7/dlv9+eg7df9NgwytX4KS5LV5yf2hTnsP/MCos6n56tP99e2DV9+XC77d9Lp3ymn/6edGKQa/OQWJ8kvSfLtjNl0+rNvD1Sdd/fXsmVfft5q+X/O9f85l//nnBkkit1kFycCEVDDodMXA/uh6ry6vqw68vHP5USwOpd/Z50YRINNpBclQJDH5vq9l18XLf6SOvvzwv0fz1+YBzfy1norBkEFCcm5UZIL4yBIZ0VO6aG5jUeWpK4s/X3WE6Lu/zmnqmQ1UBQIh5lKLIwTXxALQzHiM6Mu7/OBqzu71ExMVAgcsYICIik24vNjxBaAkOj86KT5fv/OuUPUXVppqakiikgDoORiryna7i8yP0p4Rtj9Ax5ARW8P2HYXaUlLCkEUAAAxhAhwbbNJtAAAAABJRU5ErkJggg==" alt="">

 減少http請求