Vue.js使用v-for循环渲染assets列表图片无法正常显示

硬编码<img src="@/assets/xxx.png" />能正常显示，是因为构建工具（Webpack/Vite）在编译模板阶段，会自动识别模板里写死的@/路径别名，把它转成打包后可访问的真实资源地址。
但你把@/assets/...字符串写在JS的data配置中，通过:src动态绑定时，构建工具默认不会解析JS变量里的纯字符串路径，浏览器拿到的src值就是原始的带@别名的字符串，根本识别不了这个路径别名，资源请求直接404，所以显示破损图标。你在Elements面板看到两边标签代码看起来一致，是因为面板展示的是框架维护的虚拟DOM映射的属性，不是实际发起请求的真实路径，去Network面板筛选图片请求就能看到动态绑定的资源路径完全是错的。

三种方案选任意一种即可，优先推荐前两种：

• 方案1：Webpack/Vue-cli项目用require()包裹路径
  修改data里的src配置，用require()包裹资源路径，让构建工具在编译JS阶段就处理资源引用：

  carniArray: [
    { id: 'acro', src: require('@/assets/Carnivores/acro.png') },
    { id: 'albert', src: require('@/assets/Carnivores/albert.png') },
    // 其余数组项按同样格式修改即可
  ]
  

• 方案2：Vite构建项目用new URL()静态解析资源
  封装一个取图片地址的工具方法，利用Vite的静态资源导入规则生成真实路径：

  const getAssetUrl = (path) => new URL(`/src/assets/${path}`, import.meta.url).href
  
  export default {
    data() {
      return {
        carniArray: [
          { id: 'acro', src: getAssetUrl('Carnivores/acro.png') },
          // 其余项同理传入assets下的相对路径
        ]
      }
    }
  }
  

• 方案3：把图片移到public目录用绝对路径引用
  把存放图片的Carnivores、Herbivores文件夹从src/assets移到项目根目录的public文件夹下，之后直接写根路径即可，不需要构建工具做路径解析：

  carniArray: [
    { id: 'acro', src: '/Carnivores/acro.png' },
    // 其余项同理写根路径
  ]
  

  注意：这种方案的资源不会经过构建工具的压缩、hash缓存处理，适合放不需要构建优化的固定静态资源。

问题截图

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