javascript - 使用 vue.js 将 `id` 绑定(bind)到 img src url

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 API 中获取的。

#app div 在我的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

绑定(bind)属性被解析为 javascript。因此，如果您想要文章 123 的字符串 images/articles/123.jpg，您需要将其传递给 :src 属性，如下所示:

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

或

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