如何将 JSON 对象用于 <img> src 标签？

Question

我正在构建一个动态 vuetify 导航抽屉，我想将图像存储在 JSON 数组中。我的问题是，我怎样才能（如果可能的话）将图像属性拉入标签的 src 中？

我知道使用以下方法行不通，但是怎样才能引入合适的元素？

<img class="nav-icon" src="{{item.image}}" />

Answer 1

您需要像这样绑定属性：

<img class="nav-icon" :src="item.image" />

评论后编辑 - 看来您需要使用函数来 return 像您请求的动态图像。

这个答案是我的参考。

// template
    <v-img :src="getImgUrl(image_from_json.url)" />
      
    

// data
   image_from_json: {
      url: "/images/img1.jpg",
    },

// methods
    getImgUrl(img) {
      var images = require("../../assets" + img);
      return images;
    },

如何将 JSON 对象用于 <img> src 标签？

How can I use a JSON object to an <img> src tag?

html

json

vuetify.js