Bind `id` to img src url using vue.js

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

My answer will help you, check here: stackoverflow.com/a/51084685/1292050 — Syed
– Syed, Commented Sep 25, 2018 at 20:45

ferdynator · Accepted Answer · 2018-09-25 17:50:33Z

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'" />

answered Sep 25, 2018 at 17:50

ferdynator

6,4083 gold badges30 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

n8udd Over a year ago

Thanks for the suggestion, but neither of the two methods above appear to work. I've updated the OP with more info.

n8udd Over a year ago

Sorry, this did work. I didn't notice there were two types of quotes in succession! "' and '"

Maria Bravo · Accepted Answer · 2018-09-25 23:00:16Z

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

edited Sep 25, 2018 at 23:00

answered Sep 25, 2018 at 22:54

Maria Bravo

112 bronze badges

Collectives™ on Stack Overflow

Bind `id` to img src url using vue.js

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related