Vuejs 中的动态图像绑定：https://blah/${item.img}答案

【问题标题】：dynamic image binding in Vuejs: https:/blah/${item.img}Vuejs 中的动态图像绑定：https://blah/${item.img}
【发布时间】：2020-08-20 15:33:07
【问题描述】：

我这辈子都不知道如何在 Vuejs 中动态绑定图像，形成外部站点。

我有以下正常工作的代码。

<v-btn
    v-for="item in items"
    :key="item.id"
    :to="item.path"
    color="white"
    class="brand-btn"
  >
    <v-img :src="require(`@/assets/${item.img}`)" contain></v-img>
  </v-btn>

我的团队决定将图片托管在外部网站上，例如https://thisisanexternalsite.com/images/item01.jpg

“要求”是否适用于外部网站？我试过了，它似乎不起作用：

<v-img :src="require(`https://thisisanexternalsite.com/images/${item.img}`)" contain></v-img>

这个也不好用：

<v-img :src="`https://thisisanexternalsite.com/images/${item.img}`" contain></v-img>

也不是这个：

<v-img :src="'https://thisisanexternalsite.com/images/' + item.img" contain></v-img>

我很确定我遗漏了一些非常明显的东西。

【问题讨论】：

标签： image vue.js dynamic binding

【解决方案1】：

嘘。我最诚挚的歉意，但这只是网址的一个简单错字，但为了回答我的问题，这些按预期工作。

<v-img :src="`https://thisisanexternalsite.com/images/${item.img}`" contain></v-img>

还有这个

<v-img :src="'https://thisisanexternalsite.com/images/' + item.img" contain></v-img>

下次我会更加小心。干杯。

【讨论】：