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

目录：

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

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

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

PS：vue中图片src路径赋值

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

图片src路径动态赋值

<img class="thumb" width="200px" height="150px" :src="getThumb(item.type)" />

<script>
...
methods: {
  getThumb(type) {
   let thumb = {
    WMS: require("img/world.jpg"),
    WFS: require("img/wfs.jpg"),
    tool: require("img/tool.jpg")
   };
   return thumb[type];
  }
}
...
</script>

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')
  }
 },
...

固定路径

如果是固定路径的话:

<img class="thumb" width="200px" height="150px" src="/static/img/world.jpg" />

总结

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

您可能感兴趣的文章:

• 基于vue 动态加载图片src的解决方法
• Vue自定义图片懒加载指令v-lazyload详解
• 浅谈vue中使用图片懒加载vue-lazyload插件详细指南
• vue图片加载与显示默认图片实例代码
• vue实现图片加载完成前的loading组件方法
• vue src动态加载请求获取图片的方法
• vue2.0 循环遍历加载不同图片的方法
• vue中v-for加载本地静态图片方法
• vue进行图片的预加载watch用法实例讲解
• vue图片加载失败时用默认图片替换的方法