-----------支持作者请转发本文-----------
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函数的代码如下:
![](/qrcode.jpg)
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 装载图像错误是输出的信息
对本文感兴趣,可以加李宁老师微信公众号(unitymarvel):
关注 极客起源 公众号,获得更多免费技术视频和文章。