vue获取img下的内容_vue中img src 动态加载本地json的图片路径写法

目录：

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

major_info.json文件里的图片路径写法

页面通过v-bind的方式加载：

PS：vue中图片src路径赋值

vue中引入static文件夹中图片，本以为src中直接写入图片所在路径即可，结果发现图片无法显示，控制台报404错误，图片无法找到。网上找到解决方案，在此mark一下，以便以后查询。

图片src路径动态赋值

...

methods: {

getThumb(type) {

let thumb = {

WMS: require("img/world.jpg"),

WFS: require("img/wfs.jpg"),

tool: require("img/tool.jpg")

};

return thumb[type];

}

}

...

img为设置的路径别名

...

resolve: {

extensions: ['.js', '.vue', '.json'],

alias: {

'vue$': 'vue/dist/vue.esm.js',

'@': resolve('src'),

'assets': path.resolve(__dirname, '../src/assets'),

'img': resolve('static/img'),

'%': resolve('./static')

}

},

...

固定路径

如果是固定路径的话:

总结

以上所述是小编给大家介绍的vue中img src 动态加载本地json的图片路径写法，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧！

本文标题: vue中img src 动态加载本地json的图片路径写法

本文地址: http://www.cppcns.com/wangluo/javascript/257674.html