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!