CODEWITHSUNDEEP
htmlcssvue.js
Jae
Jae

Reputation: 1177

Unable to render image using VueJS

I am trying to use VueJS to populate my index.html with photos. I'm using the iTunes API, and the return link is returning a URL to an image.

My problem is, I'm unable to render the photos. item is an object.

I've tried to do this. However, it causes the entire web page to not show up (all white). So, that is totally wrong. Originally, v-bind:src= pointed to an image in my folder. But I am trying to dynamically get the URLs.

<div class="col-sm-4" style='max-width:200px;margin-right: 30px'>
    <img style='width: 120%; display: inline; ' v-bind:src="{{ item.artworkUrl100 }}">
</div>

When I do this, I can actually see the rest of the data on my webpage. However, the image doesn't show up.

<div class="col-sm-4" style='max-width:200px;margin-right: 30px'>
     {{ item.artworkUrl100 }}
</div>

I am unsure of how to use VueJS syntax to embed images dynamically into my website.

Upvotes: 2

Views: 397

Answers (1)

Tan Dat
Tan Dat

Reputation: 3117

Remove {{ }}

<img style='width: 120%; display: inline; ' v-bind:src="item.artworkUrl100">

Upvotes: 6

Related Questions