vue+webpack 在引入圖片以及在img引用變量名的本地圖片報錯

vue 在style:background-image中引入圖片以及在img引用變量名的本地圖片

由於項目用了vue-cli，直接寫本地路徑會有問題

<img :src="'@/assets/images/activity/double9/coupon'+item.price+'.png'">
複製代碼

編譯後是 <img data-v-0343f1f6="" src="@/assets/images/activity/double9/coupon80.png">

路徑沒有加上hash,而編譯後的圖片文件是被加上hash的，因此引用失敗

正確寫法：

<img :src="require('@/assets/images/activity/double9/coupon'+item.price*10+'.png')">
或者
<img :src="activityImg"
let activityImg = require("./assets/images/activity/double9/popup-double9.png");
複製代碼

這種寫法能夠正確引用帶hash的圖片路徑

動態require 變量替代require中的路徑參數報錯

採用上述方法require圖片成功，但若是想用變量替代require中的參數，會報錯

.js
this.imgUrl='@/assets/images/no-result.png'
this.imgUrlFile=require(this.imgUrl)
.tpl
<img :src="require(imgUrl)">
<img :src="imgUrlFile">
// #2種寫法都找不到圖片，瀏覽器顯示<img data-v-71871f69="" src="">
複製代碼

官方文檔：若是你的 request 含有表達式(expressions)，會建立一個上下文(context)，由於在編譯時(compile time)並不清楚具體是哪個模塊被導入。

緣由：

• webpack自己是一個預編譯的打包工具，沒法預測未知變量路徑 不能require純變量路徑
• require(path) ,path 至少要有三部分組成, 目錄+文件名+後綴
• 目錄 => webpack 才知道從哪裏開始查找
• 後綴 => 文件後綴，必需要加上，否則會報錯
• 文件名 => 可用變量表示

解決：

// # 變量名加字符串 編譯成功
this.imgUrl='images/no-result.png'
 <img :src="require('@/assets/'+imgUrl+'.png')">
複製代碼

或者定義require.context()