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()

转载于:https://juejin.im/post/5bbeb8106fb9a05d035bfbc7