文章/答案/技术大牛

发布

社区首页 >问答首页 >VueJS:为Vuetify v-img构建动态源路径

问VueJS:为Vuetify v-img构建动态源路径
EN

Stack Overflow用户

提问于 2020-03-04 14:51:42

回答 1查看 809关注 0票数 1

我正在使用v-for使用Vuetify v-img显示图像集合。我们只存储图像的Id，然后将其动态插入v-img的src属性中。但是动态插入src值是不起作用的。显示image.title，但不显示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

vue.js

vuejs2

vuetify.js

nuxt.js

Stack Overflow用户

发布于 2020-03-04 15:35:19

绑定src属性使其正常工作，因此使用:src代替src

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

或

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

票数 1

查看全部 1 条回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/60520490

复制

相似问题

问VueJS:为Vuetify v-img构建动态源路径
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问VueJS:为Vuetify v-img构建动态源路径EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问VueJS:为Vuetify v-img构建动态源路径
EN