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

Question

Here I am trying to show image from data object in vue.js. Here is my code

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

But it shows in dom like

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

Besides if I keep {{product.productImageList[0]['name']}} outside image tag then it shows value

Answer 1

{{}} is a template for displaying text. For attribute, instead you use v-bind with a valid javascript expression. Change to the following should work:

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

Answer 2

Since the argument is a variable try binding the input like below

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

Answer 3

Remove the interpolation

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

For concatenation either go with

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

Or use computed property

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

along with below template change

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