<img :src="require('./img/'+index.dictValue+'.png')" alt style="width: 62px; height: 62px;">
字符串拼接：+
require
自己的代码
<el-row><template v-for="(index, i) in rol_1 "><el-col :xs="24" :sm="24" :lg="2" class="large-switch-item"><el-button @click="getClick(index.remark)" class="bn"><div class="large-item-img"><img :src="require('./img/'+index.dictValue+'.png')" alt style="width: 62px; height: 62px;"></div><div class="large-item-title">{{ index.dictLabel}}</div></el-button></el-col></template></el-row>
分析一下
问题
(181条消息) vue踩坑日记--动态（v-for）图片路径问题_W&T的博客-CSDN博客
通过字符串拼接来动态获取图片地址，直接在v-for采用拼接字符串，图片在页面中没有正确显示，在线调试发现打包后的图片路径不对。
原因：
webpack没有对拼接后的路径进行解析，图片没有被引用到打包后的目录。
原理:（有关静态资源处理）
静态资源处理的两种方式
在js被导入，或者在template/CSS中通过相对路径被引用的，会被webpack处理。
（当你在 JavaScript、CSS 或 *.vue 文件中使用相对路径 (必须以 . 开头) 引用一个静态资源时，该资源将会被包含进入 webpack 的依赖图中。在其编译过程中，所有诸如 <img src="…">、background: url(…) 和 CSS @import 的资源 URL 都会被解析为一个模块依赖。
例如，url(./image.png) 会被翻译为 require(’./image.png’)，而：<img src="./image.png">将会被编译到：h(‘img’, { attrs: { src: require(’./image.png’) }})）放置在public目录或者通过绝对路径被引用的不会经过webpack处理，会直接被拷贝。
问题相对路径为什么没被编译：
因为在编译时图片的url还没有拼接好，{{}}（插值）表达式只会在渲染到页面上的时候执行，所以编译的时候src还是（拼接字符串）’./…/…/assets/img/’ + item + ‘.jpg’，这样的话webpack不认为这是一个模块，所以直接不处理，图片也就没有被编译。
解决方法：
把图片作为资源引入，在图片的url加上require，变成require(url)。
参考：
vue踩坑日记--动态（v-for）图片路径问题_W&T的博客-CSDN博客
vue中for循环图片路径 动态生成图片_Ali_code的博客-CSDN博客_vue 动态生成图片列表
vue动态加载图片问题_fresh_nam的博客-CSDN博客_vue动态加载图片
