1

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

3 Answers 3

0

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)">
Sign up to request clarification or add additional context in comments.

3 Comments

Thanks but getUrl() is it ok? no parameter needed
It's ok . .in the template call only u need to send parameter.
That's the magic of passing argument in computed
0

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

1 Comment

Thanks but how can I concatenate path https ://admin.com/item_image/product.productImageList[0]['name']
0

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

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

1 Comment

Thanks but how can I concatenate path https ://admin.com/item_image/product.productImageList[0]['name']

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.