Data not rendered in image tag in vue js-CodePudding

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

CodePudding user response：

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

CodePudding user response：

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

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

CodePudding user response：

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