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
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)">
{{}} 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']">
Since the argument is a variable try binding the input like below
<img :src="product.productImageList[0]['name']">
