Vue3项目中v-for循环绑定动态图片src不生效如何解决

问题原因 #

Vue的构建工具（Vite/Webpack）默认只会处理硬编码在src属性里的静态资源路径，动态拼接的字符串路径不会被识别为资源引入，因此打包后路径不会被正确转换，导致图片加载失败。

解决方案 #

方案1：动态引入资源（推荐）

根据你使用的构建工具选择对应写法：

• 如果是Vite搭建的Vue3项目，修改img标签的src绑定：

<img
  class="card-img-top"
  :src="new URL(`../assets/pets/${pet.imatge}`, import.meta.url).href"
  :alt="pet.nombre"
/>

• 如果是Vue-cli/Webpack搭建的项目，修改为：

<img
  class="card-img-top"
  :src="require(`../assets/pets/${pet.imatge}`)"
  :alt="pet.nombre"
/>

方案2：使用public目录托管资源

将assets/pets文件夹整体移动到项目根目录的public文件夹下，直接写绝对路径绑定即可：

<img
  class="card-img-top"
  :src="`/pets/${pet.imatge}`"
  :alt="pet.nombre"
/>

public目录下的资源不会经过构建工具的编译处理，会直接拷贝到打包产物的根目录，路径写绝对路径即可正常访问。

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