vue中動態添加圖片無效、build上線後background-image路徑問題

　　又是一個週五，又一週要過去了...很開心，這周遇到了vue中的一個比較常見的坑，網上隨便一搜就有了不少解決方案...「幸運」的是，我選了一個帶坑的方案...因此我以爲有必要記錄一下這個「坑中坑」...

　　事情是這樣的： <img :src="item.img ? item.img : '../images/default.png'" alt=""> 接口字段有圖片則用接口中的，沒有則用本地默認圖片...這種寫法看似能夠，結果很失望——默認圖片顯示不出來...因而F12查看圖片路徑，結果發現...   這個路徑怎麼就變成了這樣，後來才知道...網頁把根域名做爲相對路徑的根目錄了，這樣解析出來的路徑固然找不到圖片資源。這裏還有一個重點：動態添加src被當作靜態資源處理了，沒有進行編譯。若是是 <img src="../images/default.png" alt="" 這樣的靜態路徑，vue大部分狀況（爲啥是大部分，這個坑下文會說）會把圖片處理成base64位，這樣就不存在路徑問題了...

　　問題的根源知道了，接下來就是解決問題，這裏有3種方案，網上都有...運氣好的話不會掉到小坑裏，運氣差的話，像我...陰溝裏差點翻船...下面來一一分析...

 

一、用網絡地址

　　把圖片放在cdn或本身的服務器上，把網絡地址存在imgUrl裏，而後直接<img :src="imgUrl">去展現...這種方式很省心，惟一的缺點就是要保證你的服務器不會掛掉...

 

二、把圖片放在src同級的static文件夾下

　　剛纔咱們說了，網頁把根域名做爲相對路徑的根目錄了，因此致使路徑出錯...既然是這樣，咱們把圖片放在src同級的static目錄下，因爲這個目錄是項目的根目錄，因此 :src = item.img?item.img : '/static/default.png' 能夠找到默認圖...

　　別高興的太早，若是大家公司在部署H5的項目時對路徑動了手腳...好比咱們公司，H5的項目部署在 localhost:9090/m 路徑下，這時你把圖片放在static下天然也是找不到的，因此這種方式也要謹慎...

　　固然，你也可使用相對路徑，這個問題就不存在了 :src = item.img?item.img : '../../static/default.png' 

　　v-bind好像不讓用字符串路徑，當沒有圖片時，你能夠這麼寫：

<img :src="item.image" v-if="item.image" alt="">
<img src="../../../../../static/img/img_default_avatar.png" v-else alt="">

 

三、在data裏面require圖片的相對路徑

data() {
    imgUrl:require('./assets/default.png')
}

require是node的模塊化引入的規範，經過require引入圖片的方式能夠將圖片編譯成base64，這樣也不存在路徑問題...可是問題來了...轉成baes64對圖片大小是有限制的，先看webpack.base.confit.js中的一段代碼：

這裏的limit是個坎，圖片小於這個限制時會被轉成base64，大於這個限制會被當成模塊被url-loader處理，加入hash值，變成一個絕對路徑...結合第二種方案的坑，這時的圖片也有可能找不到...所以，能夠適當的把這個限制調大點，而後從新npm run dev...

 

background-image線上使用相對路徑配置2點：

vue項目中若要使用相對路徑來得到相應靜態資源，須要修改如下內容來確保項目打包後能正常運行。

一、修改config => index.js => build => assetsPublicPath 中的'/'成爲'./'

 

二、在build => util.js 裏找到ExtractTextPlugin.extract增長一行：publicPath: '../../'，主要解決背景圖片路徑的問題。

 

對於vue中動態添加圖片無效的狀況先到這裏，若有其它狀況，歡迎補充...

 

附：

static和asserts文件區別：

assets目錄中的文件會被webpack處理解析爲模塊依賴，只支持相對路徑形式。例如，在 <img src="./logo.png">

和 background: url(./logo.png)中，"./logo.png" 是相對的資源路徑，將由Webpack解析爲模塊依賴。

 

static/ 目錄下的文件並不會被Webpack處理：它們會直接被複制到最終的打包目錄（默認是dist/static）下。必須使用絕對路徑引用這些文件，這是經過在 config.js 文件中的 build.assetsPublicPath 和 build.assetsSubDirectory 鏈接來肯定的。

任何放在 static/ 中文件須要以絕對路徑的形式引用：/static/[filename]。

 

在咱們實際的開發中，總的來講：static放不會變更的文件 assets放可能會變更的文件。