专栏首页极客起源微信小程序开发实战(13):图像组件(image)

微信小程序开发实战(13):图像组件(image)

image可以用来显示图像,这些图像可以是本地的,也可以是网络图像。例如,下面的布局代码显示了本地图像。

<view style="margin:20px">
  <view style="margin-bottom:20px">本地图像</view>
  <image src="../../resources/book.png" style="height:300px;width:240px" />
</view>

其中src属性指定了图像源,这里是本地图像文件路径。显示效果如图1所示。

图1显示本地图像

下面的布局代码显示从网络上下载的图像。

<view> <view style="margin-bottom:20px">从网络上获取图像</view> <image src="http://geekori.cn/img/weixin_code.png" style="height:300px;width:300px" bindload="bindload" /> </view>

显示效果如图2所示。

图2 显示从网络上下载的图像

其中bindload属性指定当图像装载成功后调用的事件函数,从e.detail中可以获取图像的实际高度和宽度。bindload函数的代码如下:

bindload:function(e)
{
   console.log(e.detail)
}

装载图像后,会在Console中显示如图3所示的信息。我们会看到,height和width都是344,这是图像的实际物理像素。

图3 图像装载成功后显示的信息

<image>标签还有一个mode属性,该属性用于设置图像显示模式,分为缩放和裁剪两种模式。缩放模式有3种,裁剪模式有9种,一共12种模式。这些模式的描述如下:

缩放模式

  • scaleToFill:不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 区域
  • aspectFit:保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。
  • aspectFill:保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。

裁剪模式

  • top:不缩放图片,只显示图片的顶部区域
  • bottom:不缩放图片,只显示图片的底部区域
  • center:不缩放图片,只显示图片的中间区域
  • left:不缩放图片,只显示图片的左边区域
  • right :不缩放图片,只显示图片的右边区域
  • top left:不缩放图片,只显示图片的左上边区域
  • top right:不缩放图片,只显示图片的右上边区域
  • bottom left:不缩放图片,只显示图片的左下边区域
  • bottom right:不缩放图片,只显示图片的右下边区域

例如,将mode属性值设为top,并且width和height都是200px,布局代码如下:

<view>
  <view style="margin-bottom:20px">从网络上获取图像</view>
  <image mode="top"
              src="http://geekori.cn/img/weixin_code.png"
              style="height:200px;width:200px" bindload="bindload" />
</view>

由于图像的宽度和高度都是344px,所以200px无法显示完整的图像,因此,会从顶部截取200px显示,效果如图4所示。

图4 显示一部分图像

如果src属性指定的图像路径错误,那么图像不会正常显示,如果想得知图像是否能成功显示,可以设置binderror属性,该属性指定一个函数名,当图像显示错误是调用,布局代码如下:

<view>
  <view style="margin-bottom:20px"> error image</view>
  <image src="error url" binderror="imageError" />
</view>

imageError函数的代码如下:

imageError: function(e) {
  console.log('image3发生error事件,携带值为', e.detail.errMsg)
}

程序装载后,会在Console中输出如图5所示的信息。

图5 装载图像错误是输出的信息

本文分享自微信公众号 - 极客起源(geekculture),作者:geekori

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-07-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序开发实战(11):滚动组件(picker)

    picker组件用于从列表中选择一个item,效果有点像iOS的ActionSheet,从窗口的底部弹出,选择一个item后关闭。picker可用于选择普通的i...

    蒙娜丽宁
  • 微信小程序开发实战(3):条件渲染

    其中wx:if是一个控制属性,condition是条件表达式。如果condition的值为true,则输出<view>组件中的值。如果有多个条件,和if语句的条...

    蒙娜丽宁
  • 打破国外垄断,开发中国人自己的编程语言(2):使用监听器实现计算器

    在上一篇文章中使用Antlr和Visitor实现了一个可以计算表达式的程序MarvelCalc。这个程序非常简单,相当于Antlr的HelloWorld。不过A...

    蒙娜丽宁
  • 造了四个轮子之后,我们上路跑一跑

    秋明山车神之所以开得快,不单是因为技术好,车神老爸对车子的调优也很重要,比如给车配了好轮子……编不下去了 -_-

    horizon757
  • 移动端重构实战系列6——icon与图片

    本文作者:IMWeb 结一 原文出处:IMWeb社区 未经同意,禁止转载 ”本系列教程为实战教程,是本人移动端重构经验及思想的一次总结,也是对sand...

    IMWeb前端团队
  • 移动端重构实战系列6——icon与图片

    ”本系列教程为实战教程,是本人移动端重构经验及思想的一次总结,也是对sandal及sheral UI的一次全方位剖析,首发在imweb和w3cplus两大站点及...

    IMWeb前端团队
  • 终于搞明白UML类图的关系了

    UML,全称Unified Modeling Language,统一建模语言。而UML图分为用例图、类图、对象图、状态图、活动图、时序图、协作图、构件图、部署图...

    张晓衡
  • 一文掌握14种UML图

    UML是Unified Model Language的缩写,中文是统一建模语言,是由一整套图表组成的标准化建模语言。

    Java旅途
  • 一篇文章讲清面向对象的UML类图

    从定义上看可能有点抽象,说白了就是一种由图表组成的标准化建模语言,一般我们理解的语言都是由文字组成,而这种统一建模语言是由图表组成的。我们知道开发一个软件系统,...

    lyb-geek
  • Nginx rewrite 获取问好“?”后面的参数

    节选自 《Netkiller Web 手札》 3.2.4.1. http get 参数处理 需求如下 原理地址: http://www.netkiller.c...

    netkiller old

扫码关注云+社区

领取腾讯云代金券