1

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;
  }
}
n8udd
  • 657
  • 1
  • 9
  • 30

2 Answers2

2

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'" />
ferdynator
  • 6,245
  • 3
  • 27
  • 56
  • Thanks for the suggestion, but neither of the two methods above appear to work. I've updated the OP with more info. – n8udd Sep 25 '18 at 18:23
  • Sorry, this did work. I didn't notice there were two types of quotes in succession! `"'` and `'"` – n8udd Sep 26 '18 at 09:52
1

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

Maria Bravo
  • 11
  • 2