Unable to render image using VueJS

Question

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.

See vuejs.org/v2/guide/syntax.html#Attributes

Phil
– Phil

2020-03-23 23:24:42 +00:00
Commented Mar 23, 2020 at 23:24 — Phil
– Phil, Commented Mar 23, 2020 at 23:24

Tan Dat · Accepted Answer · 2020-03-23 23:23:28Z

6

Remove {{ }}

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

answered Mar 23, 2020 at 23:23

Tan Dat

3,1271 gold badge21 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Unable to render image using VueJS

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related