Vuetify合并API中分离的图像url

Question

我正在尝试从API获取图像。在API中，API数据中有一个poster_path变量，比如说：

"poster_path":"/8kSerJrhrJWKLk1LViesGcnrUPE.jpg"

预URL是

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

我想合并预URL和poster_path，这样它就变成这样：

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

这样我就可以在我的网站上展示这张照片了。但我不知道如何使用Vuetifyv-img或只是普通的img标签。我试过这样的东西，但没有用：

<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()
}
}

非常感谢！

Answer 1

在这两种情况下，都使用src属性。不要在HTML属性中使用大括号内插{{ }}，而是使用v-bind:src或简称:src绑定到属性：

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

对于v-img，唯一的变化是标签名称：

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