Vue.js中v-for循环动态渲染图片失效问题咨询

问题原因 #

• 静态与动态路径的编译逻辑不同：硬写的src路径会被webpack在打包阶段自动识别，转换为打包后对应的资源URL；但动态拼接的字符串路径，webpack无法提前识别并处理，打包后实际访问的路径是原始拼接字符串，和实际资源位置不匹配，导致图片加载失败。
• assets资源的引用规则：Vue项目中assets目录下的资源需要通过require()或import触发webpack的资源解析流程，直接字符串拼接的路径不会被webpack处理，资源无法被正确打包和引用。

解决办法 #

方法1：用require()动态加载资源 #

修改img的src绑定逻辑，通过require()包裹动态路径，让webpack识别并处理资源：

<div v-for="n in 4" :key="n">
    <img
       :src="require(`../assets/images/image-product-${n}-thumbnail.jpg`)"
       class="rounded-xl h-16 w-16 hover:cursor-pointer"
    />
</div>

require()会在编译阶段告诉webpack查找对应文件，将其纳入打包流程，最终生成正确的访问路径。

方法2：提前预加载所有图片路径 #

先在组件的data中定义包含所有图片解析后路径的数组，再循环渲染：

// 组件的data选项
data() {
  return {
    imagePaths: [
      require('../assets/images/image-product-1-thumbnail.jpg'),
      require('../assets/images/image-product-2-thumbnail.jpg'),
      require('../assets/images/image-product-3-thumbnail.jpg'),
      require('../assets/images/image-product-4-thumbnail.jpg')
    ]
  }
}

然后循环数组渲染：

<div v-for="(path, index) in imagePaths" :key="index">
    <img
       :src="path"
       class="rounded-xl h-16 w-16 hover:cursor-pointer"
    />
</div>

这种方式提前完成了所有资源路径的解析，循环时直接使用解析后的路径即可正常加载图片。

内容的提问来源于stack exchange，提问作者Ricieri