Vue使用data返回数组内对象属性作为img src无法渲染问题

你的问题是Vue构建工具（Webpack/Vite）的静态资源解析规则导致的：直接把相对路径字符串写在data里时，构建工具不会把这个字符串识别为资源引入路径，打包后不会替换成正确的编译后资源路径，所以浏览器加载的时候找不到对应文件。而你直接在template里写死src的时候，构建工具会主动解析这个路径并处理，所以能正常显示。

额外注意：你当前提供的示例数据中所有条目的Status都不满足agent.Status == 'active'的判断条件，测试时请先修改至少一条数据的Status为active，否则对应图片模块根本不会被渲染到页面上。

下面三种实现方式可按需选择：

方案1：用require引入图片（Webpack/vue-cli项目适用） #

直接在data定义的时候就用require包裹路径，让构建工具提前解析资源：

data() {
  return {
    pendingAgency:[
      {
        Icon: require('../assets/agency_logo-2.png'),
        Name: "Moony Fox",
        Contact: "345-235-7685",
        Status: "pending"
      },
      {
        Icon: require('../assets/agency_logo-5.png'),
        Name: "Bofy Fox",
        Contact: "345-235-7685",
        Status: "Rejected"
      },
      {
        Icon: require('../assets/agency_logo-3.png'),
        Name: "Felony Mo",
        Contact: "345-235-7685",
        Status: "red"
      }        
    ]
  }
}

template部分无需修改，原有:src="agent.Icon"写法可正常使用。

方案2：把图片放到public目录下 #

如果不想用require引入，可以把所有图标放到项目根目录的public文件夹下，data里直接写绝对路径即可。比如你把图片放到public/images/目录下，那Icon就写成/images/agency_logo-2.png，构建时不会处理这个路径，浏览器会直接从站点根目录加载资源。

方案3：封装getImage方法（动态路径场景适用） #

如果你需要动态拼接路径，可封装专用方法处理资源引入：

1. 先定义引入方法

methods: {
  getImage(fileName) {
    return require(`../assets/${fileName}`)
  }
}

2. data里只存图片文件名

// 省略其他字段
Icon: 'agency_logo-2.png'

3. template里调用方法

<img :src="getImage(agent.Icon)" height="30px" width="30px"/>

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