Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of How to bind an image inside v-for without wasting too much if your time.
The question is published on by Tutorial Guruji team.
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">
We are here to answer your question about How to bind an image inside v-for - If you find the proper solution, please don't forgot to share this with your team members.