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">
正确写法:
<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()