如何从对象绑定图片src？循环渲染图片路径错误解决方案

嘿，你遇到的这个问题我之前也碰过，本质是Vue（准确说是Webpack）处理静态资源的规则导致的——直接把相对路径字符串绑到:src上的话，Webpack没办法在编译阶段识别并处理这些资源，自然就会报错啦。给你几个实用的解决方案：

方案一：用require()包裹路径 #

修改你的logoRoutes数组，把每个图片路径用require()包起来，这样Webpack就能正确解析资源路径了：

data () {
  return {
    logoRoutes: [
      { 'link': require('../assets/images/clients/55spirit.png'), 'alt': '55 Spirit logo' },
      { 'link': require('../assets/images/clients/55aqua.png'), 'alt': '55 Aqua logo' },
      // 剩下的所有对象都按照这个格式修改就好
    ]
  }
}

之后渲染的时候直接用v-for循环就能批量生成图片了，不用再手动写索引：

<template>
  <div class="logo-container">
    <img 
      v-for="(logo, index) in logoRoutes" 
      :key="index" 
      :src="logo.link" 
      :alt="logo.alt || 'Client logo'" 
    />
  </div>
</template>

这里给alt加了个默认值，避免空属性影响体验~

方案二：转移图片到public目录 #

要是不想用require()，可以把所有图片移到项目根目录的public文件夹里（如果没有就新建一个），然后把路径改成根相对路径：

data () {
  return {
    logoRoutes: [
      { 'link': '/images/clients/55spirit.png', 'alt': '55 Spirit logo' },
      { 'link': '/images/clients/55aqua.png', 'alt': '55 Aqua logo' },
      // 其他路径对应调整，注意开头要加斜杠
    ]
  }
}

这种方式下，Webpack不会对这些图片做处理，打包时会直接把public里的内容复制到dist目录，浏览器能直接识别这些路径。

方案三：用@别名简化路径 #

Vue项目默认配置了@作为src目录的别名，你可以结合require()用它来简化路径，避免层级写错：

{ 'link': require('@/assets/images/clients/55spirit.png'), 'alt': '55 Spirit logo' }

这样不管组件在哪个层级，都能精准定位到src/assets下的资源，省心不少。

内容的提问来源于stack exchange，提问作者Камилов Тимур