Vue使用v-for渲染列表时img图片无法正常显示问题求助

Vue 配套的构建工具（Webpack/Vite）仅会对模板中静态写死的 src 路径做资源解析处理，动态拼接/变量传入的路径默认不会被转义为打包后的真实资源地址，这是问题的核心原因。另外你之前使用的https://src/assets/开头的路径属于无效路径，本地服务没有对应域名的资源，直接移除即可

可行解决方案 #

方案1：定义数据时直接引入资源 #

• 如果是 Webpack 搭建的项目，在定义 links 数组时直接用 require 包裹资源路径，让构建工具提前解析资源：

links:[
  {
    id: 0,
    src: require('@/assets/superdash/ic_active-2.png'),
    isActive: false
  },
  // 其余数组项按相同规则修改即可
]

• 如果是 Vite 搭建的项目，用 new URL 方式引入：

links:[
  {
    id: 0,
    src: new URL('@/assets/superdash/ic_active-2.png', import.meta.url).href,
    isActive: false
  },
  // 其余数组项按相同规则修改即可
]

修改后模板部分不需要调整，直接用 v-bind:src="link.src" 即可正常渲染。

方案2：完善你现有的路径拼接方法 #

你的 getLinkImage 方法缺少资源解析的逻辑，补充后即可正常使用：

Webpack 版本

methods:{
  getLinkImage(img){ 
    return require(`@/assets/superdash/${img}.png`);
  }
}

模板部分调用方法传参即可：

<img v-bind:src="getLinkImage('ic_active-2')" height="15px" width="15px"/>

Vite 版本

methods:{
  getLinkImage(img){ 
    return new URL(`@/assets/superdash/${img}.png`, import.meta.url).href
  }
}

方案3：资源放入public目录直接访问 #

如果你的图片不需要做压缩、哈希等构建处理，可以把 superdash 整个文件夹放到项目根目录的 public 文件夹下，此时可以直接写绝对路径访问，不需要额外处理：

links:[
  {
    id: 0,
    src: '/superdash/ic_active-2.png',
    isActive: false
  },
  // 其余数组项按相同规则修改即可
]

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