微信小程序开发实战（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 装载图像错误是输出的信息