绑定id到img src url使用vue.js

Question

我是vue新手，正在尝试学习教程。我正试图通过我文章的id来展示这张图片。

其他一切都正常，article.id等。图像暂时将与article.id具有相同的文件名，因此我只想将其拉入组件。

<div class="card bg-dark mb-2" v-for="article in articles" v-bind:key="article.id">
  <div class="card-body">
    <img class="card-img-top" v-bind:src="images/articles/`{{ $article.id }}`.jpg" width="100%" alt="Card image cap" />
    <h5 class="card-title  text-white">{{ article.id }}. {{ article.title }}</h5>
    <h6 class="card-subtitle mb-2 text-white-50">{{ article.from }}</h6>
    <p class="card-text text-truncate" style="max-width: 150px;">{{ article.description }}</p>
  </div>
  <div class="card-footer text-right">
    <small class="text-white-50">Added by <span class="text-white">{{ article.added_by }}</span> ({{ article.created_at }})</small>
  </div>
</div>

请让我知道，如果我需要提供任何其他这个职位。

更新：

我不知道这是否有什么不同，但是我使用的article.id是从我创建的Laravel应用编程接口中获取的。

#appdiv在我的index.blade.php文件中

export default {
data() {
  return {
    articles: [],
    article: {
      id: '',
      title: '',
      description: '',
      from: '',
      rating: '',
      from: '',
      created_at: '',
      added_by: ''
    },
    recipe_id: '',
    pagination: {},
    edit: false
  }
},

created() {
  this.fetchArticles();
}, 

methods: {
  fetchArticles(page_url) {
    let vm = this;
    page_url = page_url || '/api/articles'
    fetch(page_url)
    .then(res => res.json())
    .then(res => {
      this.articles = res.data;
      vm.makePagination(res.meta, res.links);
    })
    .catch(err => console.log(err))
  },

  makePagination(meta, links) {
    let pagination = {
      current_page : meta.current_page,
      last_page : meta.last_page,
      next_page_url : links.next,
      prev_page_url : links.prev
    };

    this.pagination = pagination;
  }
}

Answer 1

胡须不能在HTML属性中使用。相反，使用v-bind指令（v-bind:src或：src）

您可以像这样绑定图像src：

<img :src="'images/articles/' + article.id  + '.jpg'" />

你可以在我为你的答案开发的小提琴的屏幕截图上看到这一点

看看小提琴：）

Answer 2

绑定属性被解析为javascript。所以，如果你想要的字符串图像/文章/123.jpg的文章123你需要传递给： src属性如下：

<img :src="`images/articles/${article.id}.jpg`" />

或

<img :src="'images/articles/' + article.id + '.jpg'" />