Привязать `id` к img src url используя vue.js

Question

Я новичок в Vue и пытаюсь следовать учебнику.Я пытаюсь вытащить изображение, которое относится к идентификатору моей статьи.

Все остальное проходит нормально, 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, который я использую, извлекается из созданного мной API 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.Поэтому, если вы хотите строку images/articles/123.jpg для статьи 123, вам нужно передать ее атрибуту :src следующим образом:

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

или

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