Question

我正在尝试列出我的项目组合，以显示项目的图像，标题和摘录。但是我无法在v-for中渲染图像，因为我无法在插值中使用小胡子。

我尝试使用v-bind：src渲染图像，但结果是一个错误。也许我在Vue中显示列表的方法是错误的？

这是我最后的html代码

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

这是我的Vue对象

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'
      }
    ]
  } 
})

还请注意，我也想将图像绑定到其他

上面的代码显示错误- invalid expression: Unexpected token .

TL; DR-如何从Vue对象绑定或渲染v-for内部的图像？

Answer 1

您需要绑定对象的属性，而不用方括号，例如

<div class="image"><img :src="portfolio.thumbnail.src" :alt="portfolio.thumbnail.alt" class="img-fluid">

Answer 2

我认为你的代码应该是这样的。

<div v-for="(portfolio,index) in portfolios" :key="index" >
      <img :src="require(`img/portfolio-${index+1}.jpg`)" :alt="portfolio.thumbnail.alt" />
</div>

如何在v-for中绑定图像

2 个答案: