目录：

注意：本地json文件和json文件中的图片地址必须写在静态静态文件夹中；否则，在json文件中找不到url地址。

在major_info.json文件中写入图片路径

页面由v-bind加载：

PS: vue中的镜像src路径分配

静态文件夹中的图像被引入vue，但人们认为图像的路径可以直接写入src。结果发现无法显示图像，控制台报告404错误，找不到图像。在线查找解决方案，在此标记以备将来查询。

图像src路径动态分配

img class=' thumb ' width=' 200 px ' height=' 150 px ' : src=' http : getthumb(item . type)'/script.methods : { getThumb(type){ let thumb={ WMS 3360 require(' img/world . jpg ')，WFS: require('img/wfs.jpg ')，tool : require(' img/tool . jpg ')}；返回thumb[type]；} }}./scriptimg是设置的路径别名

.resolve : { extensions 3360[]。js '，'。vue '，'。json']，alias : { ' vue $ ' : ' vue/dist/vue . ESM . js '，' @': resolve('src ')，Assets' :路径。resolve (_ _ dirname '，/src/assets ')，' img' :解析(' static/img ')，' %' :解析('。/static')}}，固定路径

如果是固定路径，

img class=' thumb ' width=' 200 px ' height=' 150 px ' src=' http :/static/img/world . jpg '/summary

以上是边肖介绍的img src在vue中动态加载本地json的图片路径编写，非常不错，有一定的参考价值。请各位朋友参考！