How to bind an image inside v-for

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">