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 相关文章推荐
jquery插件 cluetip 关键词注释
Jan 12 Javascript
jQuery 改变CSS样式基础代码
Feb 11 Javascript
Jquery之Ajax运用 学习运用篇
Sep 26 Javascript
基于Jquery插件开发之图片放大镜效果(仿淘宝)
Nov 19 Javascript
关于JavaScript中原型继承中的一点思考
Jul 25 Javascript
jQuery中wrapAll()方法用法实例
Jan 16 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
Jan 23 Javascript
vue.js单页面应用实例的简单实现
Apr 10 Javascript
详解webpack+es6+angular1.x项目构建
May 02 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
Aug 24 Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
Jul 29 Javascript
基于vue、react实现倒计时效果
Aug 26 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 zend解密软件绿色版测试可用
2008/04/14 PHP
PHP 变量的定义方法
2010/01/26 PHP
PHP字符串的编码问题的详细介绍
2013/04/27 PHP
在WordPress的文章编辑器中设置默认内容的方法
2015/12/29 PHP
PHP分页初探 一个最简单的PHP分页代码的简单实现
2016/06/21 PHP
PHP版微信小店接口开发实例
2016/11/12 PHP
PHP实现的微信APP支付功能示例【基于TP5框架】
2019/09/16 PHP
JavaScript 常见对象类创建代码与优缺点分析
2009/12/07 Javascript
javascript 打开页面window.location和window.open的区别
2010/03/17 Javascript
基于json的jquery地区联动效果代码
2011/07/06 Javascript
学习从实践开始之jQuery插件开发 对话框插件开发
2012/04/26 Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
2013/02/26 Javascript
js禁止页面复制功能禁用页面右键菜单示例代码
2013/08/29 Javascript
FireBug 调试JS入门教程 如何调试JS
2013/12/23 Javascript
使用变量动态设置js的属性名
2014/10/19 Javascript
js实现宇宙星空背景效果的方法
2015/03/03 Javascript
javascript组合使用构造函数模式和原型模式实例
2015/06/04 Javascript
nodejs修复ipa处理过的png图片
2016/02/17 NodeJs
Bootstrap 组件之按钮(二)
2016/05/11 Javascript
总结Javascript中的隐式类型转换
2016/08/24 Javascript
微信公众平台开发教程(六)获取个性二维码的实例
2016/12/02 Javascript
利用Jasmine对Angular进行单元测试的方法详解
2017/06/12 Javascript
jQuery pjax 应用简单示例
2018/09/20 jQuery
深入理解NodeJS 多进程和集群
2018/10/17 NodeJs
用Python进行行为驱动开发的入门教程
2015/04/23 Python
Python多进程分块读取超大文件的方法
2016/04/13 Python
python+flask实现API的方法
2018/11/21 Python
Python操作redis实例小结【String、Hash、List、Set等】
2019/05/16 Python
python实现将字符串中的数字提取出来然后求和
2020/04/02 Python
css3 border旋转时的动画应用
2016/01/22 HTML / CSS
综合实践活动方案
2014/02/14 职场文书
行政专员求职信范文
2014/05/03 职场文书
委托证明模板
2014/09/16 职场文书
乡镇党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
行政执法队伍作风整顿剖析材料
2014/10/11 职场文书
2019年怎样写好导游词?
2019/07/02 职场文书