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

Question

I'm new to vue, and trying to follow a tutorial. I'm trying to pull the image through that relates to the id of my article.

Everything else is coming through ok, article.id etc. The image will have the same filename as the article.id for the time being, so I just want to pull it into the component.

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

Please let me know if I need to provide anything else to this post.

Update:

I don't know if it makes a difference, but the article.id I'm using is being fetched from the Laravel API I've created.

The #app div is in in my index.blade.php file

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

A bound attribute is parsed as javascript. So if you want the string images/articles/123.jpg for article 123 you need to pass it to the :src attribute like so:

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

or

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

Answer 2

Mustaches cannot be used inside HTML attributes. Instead, use a v-bind directive (v-bind:src or :src)

You can bind the image src like this:

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

You can see this working on the screenshot of the fiddle I developed for your answer

Check out the Fiddle :)