數據未在 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)">