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


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 相关文章推荐
JQuery中关于jquery.js与jquery.min.js的比较探讨
May 15 Javascript
使用 js+正则表达式为关键词添加链接
Nov 11 Javascript
Javascript实现的SHA-256加密算法完整实例
Feb 02 Javascript
关于webuploader插件使用过程遇到的小问题
Nov 07 Javascript
Node.js+Express+MySql实现用户登录注册功能
Jul 10 Javascript
webpack 从指定入口文件中提取公共文件的方法
Nov 13 Javascript
node app 打包工具pkg的具体使用
Jan 17 Javascript
JS实现将对象转化为数组的方法分析
Jan 21 Javascript
JavaScript JMap类定义与使用方法示例
Jan 22 Javascript
Node.js实现一个HTTP服务器的方法示例
May 13 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
Sep 08 Javascript
js+h5 canvas实现图片验证码
Oct 11 Javascript
微信小程序 页面传值详解
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
mysql limit查询优化分析
2008/11/12 PHP
php安装xdebug/php安装pear/phpunit详解步骤(图)
2013/12/22 PHP
汇总PHPmailer群发Gmail的常见问题
2016/02/24 PHP
PHP的mysqli_stmt_init()函数讲解
2019/01/24 PHP
js 延迟加载 改变JS的位置加快网页加载速度
2012/12/11 Javascript
使用javascript控制cookie显示和隐藏背景图
2014/02/12 Javascript
JS中使用Array函数shift和pop创建可忽略参数的例子
2014/05/28 Javascript
JavaScript中的函数声明和函数表达式区别浅析
2015/03/27 Javascript
jQuery遮罩层效果实例分析
2016/01/14 Javascript
JSON与XML的区别对比及案例应用
2016/11/11 Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
2016/12/08 Javascript
基于jQuery实现选项卡效果
2017/01/04 Javascript
js实现简单的手风琴效果
2017/02/27 Javascript
微信小程序顶部可滚动导航效果
2017/10/31 Javascript
浅谈vue-router 路由传参的方法
2017/12/27 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
2018/09/30 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
2019/04/29 Javascript
js Array.slice的8种不同用法示例
2019/07/10 Javascript
jquery实现聊天机器人
2020/02/08 jQuery
JavaScript前端实现压缩图片功能
2020/03/06 Javascript
Python多线程爬虫简单示例
2016/03/04 Python
python利用拉链法实现字典方法示例
2017/03/25 Python
Python爬虫学习之获取指定网页源码
2019/07/30 Python
python下载卫星云图合成gif的方法示例
2020/02/18 Python
Python 生成VOC格式的标签实例
2020/03/10 Python
python制作一个简单的gui 数据库查询界面
2020/11/19 Python
纯CSS3实现移动端展开和收起效果的示例代码
2020/04/26 HTML / CSS
HTML5在线预览PDF的示例代码
2017/09/14 HTML / CSS
2014年消防工作实施方案
2014/02/20 职场文书
理财学专业自荐书
2014/06/28 职场文书
2014年教师节国旗下讲话稿
2014/09/10 职场文书
司法局2014法制宣传日活动总结
2014/11/01 职场文书
前台岗位职责范本
2015/04/16 职场文书
隐形的翅膀观后感
2015/06/10 职场文书
2019年暑期安全广播稿!
2019/07/03 职场文书
Django 实现jwt认证的示例
2021/04/30 Python