【vue】v-for中动态加载图片，图片路径拼接问题

<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动态加载图片