微信小程序 图片加载(本地,网路)实例详解


Posted in Javascript onMarch 10, 2017

在微信小程序中,要显示一张图片,有两种图片加载方式:

  1. 加载本地图片
  2. 加载网络图片

加载本地图片

<image class="widget__arrow" src="/image/arrowright.png" mode="aspectFill"> 
</image>

src="/image/arrowright.png" 这句就是加载本地图片资源的。想想iOS中的加载本地图片,imageName:,类似。

加载网络图片

微信在加载网络这方面封装的还是很好的,包括语音和视频的加载。直接给'src'这个属性附上地址,它会自动加载。

<image class="image_frame" src="{{imageUrl}}" mode="aspectFill"> 
</image>

这个imageUrl是在js文件中数据

data:{ 
  imageUrl:"http://img1.3lian.com/2015/w7/85/d/101.jpg" 
},

也可以直接写成

<image class="image_frame" src="http://img1.3lian.com/2015/w7/85/d/101.jpg" mode="aspectFill"> 
</image>

下来就看看image的一些属性

微信小程序 图片加载(本地,网路)实例详解

需要注意的是:image组件默认宽度300px、高度225px

src就是上面代码中用到的。

mode有12种模式,其中3种是缩放模式,9种是裁剪模式。

具体说明建议看官方文档,很详细。

很简单就这些。

遗留问题

在实践中,想实现这样一个功能:点击一个按钮,让这个图片重新加载。

不知道怎样可以在js文件中直接操作image。后续学习或许会知道。哪位仁兄知道方法请在留言中不吝赐教。

补充

遗留问题已经找到答案。

在按键的响应方法中直接用setData给imageUrl设定新的地址即可

downLoadImage:function(event){ 
  console.log(event) 
  var that = this; 
  this.setData({ 
    imageUrl:"http://h.hiphotos.baidu.com/zhidao/pic/item/6d81800a19d8bc3ed69473cb848ba61ea8d34516.jpg" 
  }) 
 }

效果如下:

微信小程序 图片加载(本地,网路)实例详解

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
Javascript中Eval函数的使用说明
Oct 11 Javascript
Extjs学习笔记之二 初识Extjs之Form
Jan 07 Javascript
js下拉框二级关联菜单效果代码具体实现
Aug 03 Javascript
jQuery选择器中含有空格的使用示例及注意事项
Aug 25 Javascript
js实现Form栏显示全格式时间时钟效果代码
Aug 19 Javascript
AngularJS入门教程之Helloworld示例
Dec 25 Javascript
jquery+css实现侧边导航栏效果
Jun 12 jQuery
详解Element-UI中上传的文件前端处理
Aug 07 Javascript
微信小程序分包加载代码实现方法详解
Sep 23 Javascript
bootstrap-paginator服务器端分页使用方法详解
Feb 13 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
Jun 02 Javascript
如何在VUE中使用vue-awesome-swiper
Jan 04 Vue.js
微信小程序 页面传值详解
Mar 10 #Javascript
详解Vue生命周期的示例
Mar 10 #Javascript
jQuery表格(Table)基本操作实例分析
Mar 10 #Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
Mar 10 #Javascript
微信小程序 出现47001 data format error原因解决办法
Mar 10 #Javascript
BootstrapValidator实现注册校验和登录错误提示效果
Mar 10 #Javascript
Bootstrap fileinput组件封装及使用详解
Mar 10 #Javascript
You might like
全国FM电台频率大全 - 9 上海市
2020/03/11 无线电
php 中的str_replace 函数总结
2007/04/27 PHP
php站内搜索关键词变亮的实现方法
2014/12/30 PHP
PHP实现的简易版图片相似度比较
2015/01/07 PHP
利用php实现一周之内自动登录存储机制(cookie、session、localStorage)
2016/10/31 PHP
php使用lua+redis实现限流,计数器模式,令牌桶模式
2019/04/04 PHP
那些年,我还在学习jquery 学习笔记
2012/03/05 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
2014/04/17 Javascript
json定义及jquery操作json的方法
2016/09/29 Javascript
ES6中Math对象的部分扩展
2017/02/20 Javascript
Vue.js 2.0中select级联下拉框实例
2017/03/06 Javascript
Node接收电子邮件的实例代码
2017/07/21 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
2017/09/26 Javascript
AngularJS中的路由使用及实现代码
2017/10/09 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
2018/02/05 Javascript
详解如何用babel转换es6的class语法
2018/04/03 Javascript
ES6与CommonJS中的模块处理的区别
2018/06/13 Javascript
最简单的vue消息提示全局组件的方法
2019/06/16 Javascript
百度小程序自定义通用toast组件
2019/07/17 Javascript
vue中的mescroll搜索运用及各种填坑处理
2019/10/30 Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
2020/08/12 Javascript
小程序实现点击tab切换左右滑动
2020/11/16 Javascript
python处理大数字的方法
2015/05/27 Python
MAC中PyCharm设置python3解释器
2017/12/15 Python
python 将字符串转换成字典dict的各种方式总结
2018/03/23 Python
Sanic框架基于类的视图用法示例
2018/07/18 Python
python实现播放音频和录音功能示例代码
2018/12/30 Python
英国袜子店:Sock Shop
2017/01/11 全球购物
大都会艺术博物馆商店:The Met Store
2018/06/22 全球购物
英国助听器购物网站:Hearing Direct
2018/08/21 全球购物
大三学生入党思想汇报
2014/01/02 职场文书
培训通知
2015/04/17 职场文书
老公写给老婆的检讨书
2015/05/06 职场文书
初中政教处工作总结
2015/08/12 职场文书
2020年个人安全保证书参考模板
2020/01/08 职场文书
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
2021/03/31 HTML / CSS