Vuetify merge separated image url from API

Viewed 128

I'm trying to fetch an image from an API. In the API, there is a poster_path variable in the API data, let's say like this:

"poster_path":"/8kSerJrhrJWKLk1LViesGcnrUPE.jpg"

The pre-URL is

https://image.tmdb.org/t/p/w600_and_h900_bestv2

I want to merge the pre-URL and the poster_path so it becomes like this:

https://image.tmdb.org/t/p/w600_and_h900_bestv2/8kSerJrhrJWKLk1LViesGcnrUPE.jpg

so I can show the picture in my website. But I don't know how to do it with Vuetify v-img or just plain img tag. I've tried something like this but it didn't work:

<img v-img="'https://image.tmdb.org/t/p/w600_and_h900_bestv2'+ {{moviePosterSrc}}">
export default {
  props: ['id'],
  data: function() {
    return {
      movie : null,
      casts: null,
      moviePosterSrc: ``
    }
  },
  methods: {
    getData() {
      var that = this
      axios.get('https://api.themoviedb.org/3/movie/'+this.id+'?api_key=my_key_here')
        .then(function(response) {
        that.movie = response.data
        that.moviePosterSrc = response.data.poster_path
      })
    }
  },
  mounted: function () {
    this.getData(),
      this.getImage()
  }
}

Many thanks!

1 Answers

In both cases, use the src attribute. Don't use curly brace interpolation {{ }} inside HTML attributes, but instead bind to the attribute with v-bind:src or just :src for short:

<img :src="'https://image.tmdb.org/t/p/w600_and_h900_bestv2' + moviePosterSrc" />

For v-img, the only change is the tag name:

<v-img :src="'https://image.tmdb.org/t/p/w600_and_h900_bestv2' + moviePosterSrc"></v-img>
Related