image可以用来显示图像，这些图像可以是本地的，也可以是网络图像。例如，下面的布局代码显示了本地图像。
代码语言：javascript复制<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函数的代码如下：
代码语言：javascript复制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，布局代码如下：
代码语言：javascript复制<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属性，该属性指定一个函数名，当图像显示错误是调用，布局代码如下：
代码语言：javascript复制<view>
<view style="margin-bottom:20px"> error image</view>
<image src="error url" binderror="imageError" />
</view>imageError函数的代码如下：
代码语言：javascript复制imageError: function(e) {
console.log('image3发生error事件，携带值为', e.detail.errMsg)
}程序装载后，会在Console中输出如图5所示的信息。
图5 装载图像错误是输出的信息
