Vue 3中如何利用数组内URL属性通过<img src/>显示图片？

解决Vue数组中图片URL无法在标签显示的问题 #

常见问题及修复方案 #

1. 本地图片路径未被webpack正确处理 #

如果你的图片是项目内的本地静态资源，直接在数组里写相对路径（比如./assets/image.jpg）会导致webpack无法识别，最终路径解析错误。

修复方式：
定义产品数组时，用require()包裹图片路径，让webpack将其作为模块处理：

// App.vue 中修改products数组
const products = [
  {
    id: 1,
    name: "示例产品",
    url: require('./assets/your-image.jpg')
  },
  // 其他产品项同理
];

之后在Product.vue中直接绑定即可：

<img :src="product.url" alt="产品图" />

2. 路径写法或绑定语法错误 #

• 确认路径是相对于当前组件的正确相对路径（比如App.vue在src目录下，图片在src/assets里，路径应为./assets/xxx.jpg）；如果图片放在public目录，直接写绝对路径（比如/images/xxx.jpg）即可，无需require。
• 必须使用v-bind语法（简写:src）绑定动态路径，不要用插值表达式写在src属性里：

// 错误写法
<img src="{{product.url}}" />

// 正确写法
<img :src="product.url" />

3. 网络图片路径问题 #

如果是网络图片，确保数组里的url是完整的http/https链接，直接绑定:src="product.url"即可，无需额外处理。

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