The question is published on by Tutorial Guruji team.
I am trying to make a list of my projects portfolio that shows the image, title, and the excerpt of my project. But I’m having trouble how do I render my image within a v-for because I can’t use a mustache inside an interpolation.
I tried using v-bind:src to render my image but it turns out to be an error. Perhaps my approach on showing lists in Vue is wrong?
Here is my last html code
<div v-for="portfolio in portfolios" class="row portfolio text-center color-white"> <div class="col-md-4"> <div class="box-image"> <div class="image"><img :src="{portfolio.thumbnail.src}" :alt="{portfolio.thumbnail.alt}" class="img-fluid"> <div class="overlay d-flex align-items-center justify-content-center"> <div class="content"> <div class="name"> <h3><a href="portfolio-detail.html" class="color-white">{{portfolio.title}}</a></h3> </div> <div class="text"> <p class="d-sm-none">{{portfolio.excerpt}}</p> <p class="buttons"><a href="#" class="btn btn-template-outlined-white">Demo</a><a href="#" class="btn btn-template-outlined-white">Beli</a></p> </div> </div> </div> </div> </div> </div> </div>
And here is my vue object
var app = new Vue({ el: '#all', data: [ { portfolios: [ { thumbnail: { alt: 'Portfolio 1', src: 'img/portfolio-1' }, title: 'Portfolio Number One', excerpt: 'Lorem Ipsum dolor sit amet' }, { thumbnail: { alt: 'Portfolio 2', src: 'img/portfolio-2.jpg' }, title: 'Portfolio Number Two', excerpt: 'Lorem Ipsum dolor sit amet' }, { thumbnail: { alt: 'Portfolio 3', src: 'img/portfolio-3.jpg' }, title: 'Portfolio Number Three', excerpt: 'Lorem Ipsum dolor sit amet' } ] } })
Also notice that I want to bind the image alt too
The code above shows an error of - invalid expression: Unexpected token .
TL;DR – How do I bind or render an image inside a v-for from a Vue object?
Answer
You need to bind the object’s property without brackets e.g
<div class="image"><img :src="portfolio.thumbnail.src" :alt="portfolio.thumbnail.alt" class="img-fluid">