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

(编辑：jimmy 日期: 2024/9/24 浏览：2)

注意：本地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="/UploadFiles/2021-04-02/getThumb(item.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')
  }
 },
...


固定路径
如果是固定路径的话:


<img class="thumb" width="200px" height="150px" src="/UploadFiles/2021-04-02/world.jpg">

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

上一篇：vue请求本地自己编写的json文件的方法

下一篇：详解如何给React-Router添加路由页面切换时的过渡动画

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

一句话新闻

最新资源