Image VueJS：为Vuetify v-img构建动态src路径

我正在使用

v-for

来显示使用

Vuetify

v-img

的图像集合。我们只存储图像的Id，然后将其动态插入

v-img

的

src

属性中。但动态插入

src

值无效<代码>图像。显示标题，但对

v-img

不显示任何内容。我尝试过其他一些答案，但都不奏效。有人知道这样做的正确方法吗

<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"
      }
    ]
})        

{{image.title}
导出默认值{
数据：（）=>({
图像：[
{
id:“2”，
sourceId:“bMwG1R3sXnE”，
标题：“日出”
},
{
id:“3”，
sourceId:“pqrwG1R3sXnE”，
标题：“亚马逊森林”
}
]
})        

好吧，绑定

src

属性使其工作，因此使用

:src

  <v-img
    :src="'https://img.imagestore.com/image/' + image.sourceId + '.jpg'">
  </v-img>

或

太棒了！您必须提供的任何类型的绑定

：

这是

v-bind:src的缩写
  <v-img
    :src="`https://img.imagestore.com/image/${image.sourceId}.jpg`">
  </v-img>