Vue.js中img标签src属性使用双大括号绑定数据无法渲染问题

错误原因 #

Vue 框架不支持在 HTML 标签的属性值内直接使用 {{}} 插值语法，所有动态属性绑定都必须通过 v-bind 指令实现。你之前把插值写在标签内容区能正常生效，是因为内容区默认支持 {{}} 插值。

修复方案 #

将 src 属性改为动态绑定写法，去掉 {{}} 即可，同时建议把原生的 onclick 也替换为 Vue 的事件绑定写法，调用组件内定义的方法：

<!-- v-bind 完整写法 -->
<a v-on:click="openModal">
  <img v-bind:src="product.productImageList[0]['name']" alt="产品图片">
</a>

<!-- 简写写法（项目中更常用） -->
<a @click="openModal">
  <img :src="product.productImageList[0]['name']" alt="产品图片">
</a>

优化建议 #

• 如果product.productImageList可能为空，可添加可选链避免报错：:src="product?.productImageList?.[0]?.name"
• 如果图片路径是项目内的本地静态资源（存放在assets目录下），需要用require包裹路径：:src="require(@/assets/${product.productImageList[0]['name']})"

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