DDR爱好者之家

vue中img src 动态加载本地json的图片路径写法
站长资源 2024/11/25 佚名
54 1538
DDR爱好者之家 Design By 杰米

目录：

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

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

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

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

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

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

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的图片路径写法，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧！
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米