I am facing an issue with VueJS while trying to populate my index.html with images fetched from the iTunes API. The API returns a URL to an image, but I am struggling to render them on my webpage. The 'item' variable holds the object data.
Initially, I attempted the following code snippet to display the images dynamically, but it caused the entire webpage to display as blank, which is not the desired outcome.
<div class="col-sm-4" style='max-width:200px;margin-right: 30px'>
<img style='width: 120%; display: inline; ' v-bind:src="{{ item.artworkUrl100 }}">
</div>
Subsequently, I tried another approach where the image was not displayed, but the data was visible on the webpage.
<div class="col-sm-4" style='max-width:200px;margin-right: 30px'>
{{ item.artworkUrl100 }}
</div>
I am unsure of the correct VueJS syntax to dynamically embed images from the API into my website. Any suggestions or guidance would be greatly appreciated.