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

网络编程 2024/11/20 佚名

3 1 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,img,src,vue动态加载,vue,json

风云阁资源网 Design By www.bgabc.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

风云阁资源网 Design By www.bgabc.com

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

暂无评论...

更新日志

2024年11月20日

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

vue请求本地自己编写的json文件的方法

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

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

更新日志

友情链接