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


Posted in Javascript onApril 25, 2019

目录:

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="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的图片路径写法,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧!

Javascript 相关文章推荐
js自动下载文件到本地的实现代码
Apr 28 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
Sep 27 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
Mar 09 Javascript
浅谈js 闭包引起的内存泄露问题
Jun 22 Javascript
jquery获取url参数及url加参数的方法
Oct 26 Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
Aug 06 Javascript
jQuery插件ajaxFileUpload使用详解
Jan 10 Javascript
vue下跨域设置的相关介绍
Aug 26 Javascript
vue学习教程之带你一步步详细解析vue-cli
Dec 26 Javascript
微信小程序bindinput与bindsubmit的区别实例分析
Apr 17 Javascript
vuejs中父子组件之间通信方法实例详解
Jan 17 Javascript
vue 子组件watch监听不到prop的解决
Aug 09 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
Apr 25 #Javascript
vue项目中使用fetch的实现方法
Apr 25 #Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
Apr 25 #Javascript
微信小程序遍历Echarts图表实现多个饼图
Apr 25 #Javascript
在微信小程序中使用图表的方法示例
Apr 25 #Javascript
详解VUE Element-UI多级菜单动态渲染的组件
Apr 25 #Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
Apr 25 #Javascript
You might like
使用PHP模拟HTTP认证
2006/10/09 PHP
浅析PHP微信支付通知的处理方式
2014/05/25 PHP
PHP简单的MVC框架实现方法
2015/12/01 PHP
Composer设置忽略版本匹配的方法
2016/04/27 PHP
浅析php-fpm静态和动态执行方式的比较
2016/11/09 PHP
Yii2――使用数据库操作汇总(增删查改、事务)
2016/12/19 PHP
PHP执行shell脚本运行程序不产生core文件的方法
2016/12/28 PHP
jquery插件制作 手风琴Panel效果实现
2012/08/17 Javascript
JavaScript类属性的访问方式详解
2014/02/11 Javascript
javascript 中that的含义示例介绍
2014/05/14 Javascript
jquery显示隐藏input对象
2014/07/21 Javascript
js实现div弹出层的方法
2014/11/20 Javascript
Javascript实现检测客户端类型代码封包
2015/12/03 Javascript
React Native之TextInput组件解析示例
2017/08/22 Javascript
jQuery实现获取动态添加的标签对象示例
2018/06/28 jQuery
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
2018/09/18 Javascript
[01:40]2014DOTA2国际邀请赛 三冰SOLO赛后采访恶搞
2014/07/09 DOTA
浅谈机器学习需要的了解的十大算法
2017/12/15 Python
Python打印“菱形”星号代码方法
2018/02/05 Python
使用浏览器访问python写的服务器程序
2019/10/10 Python
Pytorch实现神经网络的分类方式
2020/01/08 Python
Python pandas 列转行操作详解(类似hive中explode方法)
2020/05/18 Python
python绘制高斯曲线
2021/02/19 Python
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
2013/01/07 HTML / CSS
HTML5 Canvas的性能提高技巧经验分享
2013/07/02 HTML / CSS
Original Penguin美国官网:布拉德皮特、强尼德普喜爱的服装品牌
2016/10/25 全球购物
DataList 能否分页,请问如何实现?
2015/05/03 面试题
玩具公司的创业计划书
2013/12/31 职场文书
班主任工作经验材料
2014/02/02 职场文书
社会治安综合治理管理责任书
2014/04/16 职场文书
学校课外活动总结
2014/05/08 职场文书
小学生倡议书范文
2014/05/13 职场文书
人力资源管理专业求职信
2014/07/23 职场文书
助学金感谢信
2015/01/20 职场文书
三八节祝酒词
2015/08/11 职场文书
Python连接Postgres/Mysql/Mongo数据库基本操作大全
2021/06/29 Python