javascript - Vue-cli：如何使用本地 json 中的图片路径作为 src

Question

我有一个具有这种结构的 json 文件：

[
  {
    "id": 1,
    "name": "name1",
    "address": "require(./assets/pic1.jpg)"
  }
]

我导入它：

import data from "./assets/test.json"

然后尝试将其用作我的图像的 src：

<img :src='item.address'>

但图像没有出现。有人可以说如何解决这个问题吗？

标签： javascriptvue.jsvue-clivue-cli-3

Answer 1

您可以通过更改 json 文件和图像元素来解决此问题：

[
  {
    "id": 1,
    "name": "name1",
    "address": 'pic1.jpg'
  }
]

<img :src="require(`./assets/${item.address}`)" >

在此处查看更多信息： https ://github.com/vuejs/Discussion/issues/202