vue项目中新建了一个json文件，我要怎样在json文件中引入本地图片，我试了几个方法都是404not found

Question

{

"Code": 200,
"Msg": null,
"Data": {
    "FitUserGuid": "897867",
    "OpenId": "oGJKUs",
    "NickName": "nick",
    "FrontState": "Didkkckcmjgj ",
    "FitStory": "mFkkcmmcmvmvmvm ",
    "PresentState": "明目木有",
    "FinallyWantSay": "搜木有啦",
    "Achievements": "还会",
    "FitSpirit": "您搜",
    "FitFrontPhoto": "./img/button1.png",
}

}
文件目录如下

Answer 1

图片文件放到static里，引用路径写'static/img/xxx'
打包完相对于static的路径是不变的，应该可行。

Answer 2

换成这样试试

"FitFrontPhoto": "src/components/img/button1.png"

Answer 3

建议基于 index 文件的路径设置一个变量，根据不同的编译环境走不同的路径，run build 以后目录结构是变化的，默认的编译规则构建完成后只有一个 static 目录和 index.html 文件。

如：

const ASSETS_HOST = environment === 'production' ? 'static/img/' : 'src/components/img/';

// 具体的环境变量根据 cli 定义的来

Answer 4

在static 文件夹下创建img 文件夹。然后把所有需要用到的图片都放在这里。以后路径都为 ./static/img/XX.png
放在这个文件夹下的，在打包以后能够确保路径是正确的