vue组件读取static文件夹内json文件的图片路径问题

static是放置静态文件的地方,可以我们也会把json文件放在里面,但是经常我们会遇到读取josn文件内图片路径的问题,这个问题困了我两天,今天一大早就又开始研究这个问题,现在终于得到了解决,关于这个问题,我就在这里说一下,希望可以帮到和我一样的初学者。如果哪里有专业用语不准确的地方,还希望能为我指出,谢谢!

这是我的组件目录:

vue组件读取static文件夹内json文件的图片路径问题_第1张图片

 

这里的 ③ 是我自己的 json 文件,里面有图片路径,内容如下(为了方便,我的json里面只有一组数据):

vue组件读取static文件夹内json文件的图片路径问题_第2张图片

 

这里的 ② 就是我的图片了,

vue组件读取static文件夹内json文件的图片路径问题_第3张图片

这里的 ① 是vue组件的文件(报错是编辑软件报的错,实际运行良好,没有任何报错信息),就是这个组件需要读取 ③ 里面的内容,当然包括图片的路径了,

在这里, json 里面的图片路径不是相对于 json 文件的图片路径:“./shouji-smal-img/shouji1.png”,而应该是读取 ① vue组件读取图片的路径:“../../static/shouji-smal-img/shouji1.png”

所以我一直在组件内读取不了图片,都是因为在 json 内的图片路径写错了,不应该是相对于 json 文件的图片路径,而应该是调用 json文件的 vue 读取图片的路径

 

你可能感兴趣的:(Vue.js)