Я использую v-for
для отображения коллекции изображений, используя Vuetify
v-img
. Мы сохраняем только идентификатор изображения, который затем динамически вставляется в атрибут src
v-img
. Но динамическая вставка значения src
не работает. image.title
отображается, но ничего не отображается для v-img
. Я попробовал несколько других ответов на SO, но ни один не работал. Кто-нибудь знает, как правильно это сделать?
<v-card max-width="400" v-for="image in images" :key="image.sourceId">
{{image.title}}
<v-img
src="'https://img.imagestore.com/image/' + image.sourceId + '.jpg'">
</v-img>
</v-card>
export default {
data: () => ({
images: [
{
id: "2",
sourceId: "bMwG1R3sXnE",
title: "Sunrise"
},
{
id: "3",
sourceId: "pqrwG1R3sXnE",
title: "Amazon Forest"
}
]
})