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

Question

这里我试图在 vue js 中显示来自数据对象的图像。这是我的代码

<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']">

对于串联，可以选择

<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)">

Data not rendered in image tag in vue js