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

【问题标题】：How can I use a JSON object to an <img> src tag?如何将 JSON 对象用于 <img> src 标签？
【发布时间】：2021-07-26 19:07:58
【问题描述】：

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

我知道使用以下方法行不通，但是什么可以拉入正确的元素？

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

【问题讨论】：

标签： html json vuetify.js

【解决方案1】：

你需要像这样绑定属性：

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

在 cmets 之后编辑 - 似乎您需要使用函数来返回您所请求的动态图像。

这个答案是我的参考。 Vue.js dynamic images not working

// 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;
    },

【讨论】：

我要补充一点，如果你使用 webpack，你可能需要添加一个 require 包装器：:src="require(item.image)"
谢谢。这是正确地拉入文件。只需快速跟进：因为我通过 JSON 提取图像，例如“image:”../assets/images/icons/small_referral.png“”，它实际上并没有带入实际图像，因为它只是附加到构建后的 URL。我有什么需要做的吗？
这似乎是一个 webpack 问题，并已在此处得到解答：stackoverflow.com/questions/40491506/… 为了格式化，我将在原始答案中添加一个 sn-p。
非常感谢@Tim！