实现图标选择器(如下图效果),在加载图片时遇到了两个问题
加载图片正确实现代码如下:
// html
<div v-for="(item, idx) in imgList" :key="idx">
<img :src="returnImg(item)" alt="">
</div>
// js
imgList: ['img1.png', 'img2.png']
//使用require将url转为base64渲染图片
// require是node用来加载并执行其它文件导出的模块的方法。
returnImg(name) {
return require(`../../assets/imgs/screen/${name}`);
},
遇到的坑:
require不能用纯动态地址,必须要有图片的 路径+名称+后缀(检查路径不要写错)
参考官方文档 依赖管理 | webpack 中文文档
//错误示例
imgList: [
'../../assets/imgs/screen/img1.png',
'../../assets/imgs/screen/img2.png'
]
returnImg(url) {
// 无法加载图片
return require(url);
},
错误示例遇到了以下提示
在弹窗里加载图片的时候,未拿到数据会出现下面的报错,记得用v-if判断一下
<img v-if="form.imgName" :src="returnImg(form.imgName)" alt="">