微信小程序开发实战（13）：图像组件（image）

比眉伴天荒 2023-03-01 08:42 75阅读 0赞

\-----------支持作者请转发本文-----------

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

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

![format_png][]

图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所示。

![format_png 1][]

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

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

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

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

![format_png 2][]

图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所示。

![format_png 3][]

图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所示的信息。

![format_png 4][]

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

对本文感兴趣，可以加李宁老师微信公众号（unitymarvel）：

![format_png 5][]

关注  极客起源  公众号，获得更多免费技术视频和文章。

![format_png 6][]

[format_png]: /images/20230209/bcc523d0caa14792b594b21bcb1002bc.png
[format_png 1]: /images/20230209/1563c25f755a4658a2dedd111cd5a8a7.png
[format_png 2]: /images/20230209/e489f55d31ce4e3d86b1cbcb3820baa8.png
[format_png 3]: /images/20230209/12b8b0d2ff154ab4b79dc2974b2a6bbb.png
[format_png 4]: /images/20230209/d30cc5b994c34e0595b1f48d85d429a2.png
[format_png 5]: /images/20230209/e0052f00906444dbb1ba77b8023f74c6.png
[format_png 6]: /images/20230209/84a1278e593c419c982d97ffa7128aef.png