数据未在 vue.js 中的图像标记中呈现

Question

在这里，我试图显示 vue.js 中数据 object 的图像。这是我的代码

<a onclick="openModal()"><img src="{{product.productImageList[0]['name']}}"></a>

但它在dom中显示为

<img src="{{product.productImageList[0]['name']}}">

此外，如果我将 {{product.productImageList[0]['name']}} 保留在图像标签之外，那么它会显示价值

Answer 1

{{}}是用于显示文本的模板。 对于属性，而是使用v-bind和有效的 javascript 表达式。 更改为以下内容应该有效：

<img v-bind:src="product.productImageList[0]['name']">

Answer 2

由于参数是一个变量，请尝试像下面这样绑定输入

<img :src="product.productImageList[0]['name']">

Answer 3

删除插值

<img v-bind:src="product.productImageList[0]['name']">

对于 go 与

<img v-bind:src="'https ://admin.com/item_image/'+product.productImageList[0]['name']">

或者使用计算属性

computed: {
getUrl() {
 return url=> {
  const newUrl = `https ://admin.com/item_image/${product.productImageList[0].name}`;
return newUrl;
 }
}
}

以及以下模板更改

<img v-bind:src="getUrl(product.productImageList[0].name)">