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


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 相关文章推荐
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
Apr 12 Javascript
浅析JQuery获取和设置Select选项的常用方法总结
Jul 04 Javascript
javascript中简单的进制转换代码实例
Oct 26 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
Jul 02 Javascript
Node.js事件循环(Event Loop)和线程池详解
Jan 28 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
Dec 10 Javascript
详解node-ccap模块生成captcha验证码
Jul 01 Javascript
微信小程序中button组件的边框设置的实例详解
Sep 27 Javascript
nuxt.js 缓存实践
Jun 25 Javascript
Angular4 Select选择改变事件的方法
Oct 09 Javascript
vue-cli3+typescript新建一个项目的思路分析
Aug 06 Javascript
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
微信小程序 页面传值详解
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
php在多维数组中根据键名快速查询其父键以及父键值的代码
2011/05/07 PHP
浅析memcache启动以及telnet命令详解
2013/06/28 PHP
浅谈PHP的数据库接口和技术
2016/12/09 PHP
PHP错误处理函数register_shutdown_function使用示例
2017/07/03 PHP
Laravel获取所有的数据库表及结构的方法
2019/10/10 PHP
javascript生成/解析dom的CDATA类型的字段的代码
2007/04/22 Javascript
基于Jquery的标签智能验证实现代码
2010/12/27 Javascript
JS 自定义带默认值的函数
2011/07/21 Javascript
javascript 主动派发事件总结
2011/08/09 Javascript
IE与FireFox中的childNodes区别
2011/10/20 Javascript
js 实现 input type=&quot;file&quot; 文件上传示例代码
2013/08/07 Javascript
向左滚动文字 js代码效果
2013/08/17 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
2014/12/29 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
2015/11/17 Javascript
jQuery插件formValidator实现表单验证
2016/05/23 Javascript
避免jQuery名字冲突 noConflict()方法
2016/07/30 Javascript
JavaScript两个变量交换值的实现方法
2017/03/01 Javascript
js实现1,2,3,5数字按照概率生成
2017/09/12 Javascript
webpack组织模块打包Library的原理及实现
2018/03/10 Javascript
浅析vue-router原理
2018/10/19 Javascript
解决layer图标icon不加载的问题
2019/09/04 Javascript
vue中使用[provide/inject]实现页面reload的方法
2019/09/30 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
2020/05/27 Javascript
[04:49]2014DOTA2国际邀请赛 Newbee顺利挺进总决赛 ImbaTV独家专访
2014/07/19 DOTA
[01:32:50]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第一场 1月25日
2021/03/11 DOTA
Python设计模式之观察者模式简单示例
2018/01/10 Python
对matplotlib改变colorbar位置和方向的方法详解
2018/12/13 Python
Python BeautifulReport可视化报告代码实例
2020/04/13 Python
python如何将图片转换素描画
2020/09/08 Python
利用CSS3的线性渐变linear-gradient制作边框的示例
2016/06/02 HTML / CSS
Jo Malone美国官网:祖玛珑香水
2017/03/27 全球购物
美国的Eastbay旗下的运动款子品牌:Final-Score
2018/01/01 全球购物
《雨霖铃》教学反思
2014/02/22 职场文书
建设单位项目负责人任命书
2014/06/06 职场文书
2015年圣诞节活动总结
2015/03/24 职场文书
JVM入门之类加载与字节码技术(类加载与类的加载器)
2021/06/15 Java/Android