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 相关文章推荐
onpropertypchange
Jul 01 Javascript
JavaScript获取路径设计源码
May 22 Javascript
script标签属性用type还是language
Jan 21 Javascript
4种JavaScript实现简单tab选项卡切换的方法
Jan 06 Javascript
浅析angularJS中的ui-router和ng-grid模块
May 20 Javascript
setTimeout学习小结
Feb 08 Javascript
js仿拉勾网首页穿墙广告效果
Mar 08 Javascript
vue之nextTick全面解析
May 17 Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 jQuery
js实现unicode码字符串与utf8字节数据互转详解
Mar 21 Javascript
基于纯JS实现多张图片的懒加载Lazy过程解析
Oct 14 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
Aug 05 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文件
2007/01/04 PHP
PHP改进计算字符串相似度的函数similar_text()、levenshtein()
2014/10/27 PHP
PHP的Yii框架入门使用教程
2016/02/15 PHP
Ruffy javascript 学习笔记
2009/11/30 Javascript
JavaScript 以对象为索引的关联数组
2010/05/19 Javascript
JavaScript支持的最大递归调用次数分析
2014/06/24 Javascript
在JS数组特定索引处指定位置插入元素的技巧
2014/08/24 Javascript
AngularJS Module方法详解
2015/12/08 Javascript
浅谈javascript中的三种弹窗
2016/10/21 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
2016/10/29 Javascript
原生js实现可爱糖果数字时间特效
2016/12/30 Javascript
JavaScript中的call和apply的用途以及区别
2017/01/11 Javascript
jQuery弹出层插件popShow(改进版)用法示例
2017/01/23 Javascript
JS中min函数实例讲解
2019/02/18 Javascript
浅析vue插槽和作用域插槽的理解
2019/04/22 Javascript
js实现GIF图片的分解和合成
2019/10/24 Javascript
javascript利用键盘控制小方块的移动
2020/04/20 Javascript
python求众数问题实例
2014/09/26 Python
Sublime开发python程序的示例代码
2018/01/24 Python
pyqt 实现QlineEdit 输入密码显示成圆点的方法
2019/06/24 Python
Django框架中序列化和反序列化的例子
2019/08/06 Python
Python中BeautifuSoup库的用法使用详解
2019/11/15 Python
Python 词典(Dict) 加载与保存示例
2019/12/06 Python
python3的UnicodeDecodeError解决方法
2019/12/20 Python
Python实现疫情通定时自动填写功能(附代码)
2020/05/27 Python
通过实例解析Python RPC实现原理及方法
2020/07/07 Python
PyCharm 2020.2.2 x64 下载并安装的详细教程
2020/10/15 Python
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
2017/08/24 HTML / CSS
全球性的在线鞋类品牌:Public Desire
2019/04/03 全球购物
电气专业应届生求职信
2013/11/01 职场文书
2014年学生会工作总结
2014/11/07 职场文书
2014幼儿园小班工作总结
2014/11/10 职场文书
英语导游词
2015/02/13 职场文书
学雷锋献爱心倡议书
2015/04/27 职场文书
小平您好观后感
2015/06/09 职场文书
未婚证明格式
2015/06/15 职场文书