一、u-image的简介

u-image是一个uni-app原生组件，可以在uni-app项目中使用。它提供了一种快速简便的方式来处理图片和图像的操作。使用u-image可以方便地加载、显示、缓存和调整图像大小。 u-image可以使用本地文件或网络资源。通过提供一个图片src属性，u-image可以将图片呈现在应用程序中。u-image还可以用来创建实时图像视频应用。

二、在uni-app中使用u-image

要使用u-image组件创建图像，需要在uni-app项目中进行以下步骤： 1、在pages.json文件中对组件进行声明：

{
  "pages": [
    {
      "path": "pages/example/index",
      "style": {
        "navigationBarTitleText": "u-image 示例页"
      }
    }
  ],
  "usingComponents": {
    "u-image": "/components/u-image/u-image"
  }
}

2、在页面的wxml文件中添加u-image组件：

<u-image src="http://img3.douban.com/view/commodity_review/large/public/p1353992335.19.webp"></u-image>

可以看到，只需要在标签中提供src属性即可渲染该图片。

三、u-image的属性与事件

1、属性

u-image提供了以下属性：

• src: 图片资源地址，支持本地和远程资源地址。
• mode: 图片裁剪、缩放的模式，默认值为'scaleToFill'。
• lazy-load: 是否开启图片懒加载。默认值为false。
• placeholder: 图片加载中占位图的地址。

2、事件

u-image提供一些与图片相关的事件。

• load: 当图片加载完后触发该事件。
• error: 当图片加载失败后触发该事件。

四、u-image的示例代码

下面是一个使用u-image创建的简单示例：

<u-image src="http://img3.douban.com/view/commodity_review/large/public/p1353992335.19.webp"></u-image>

可以看到，只需要在标签中提供src属性即可渲染该图片。 下面是一个示例，展示如何使用placeholder、lazy-load属性来实现懒加载效果：

<u-image src="http://img3.douban.com/view/commodity_review/large/public/p1353992335.19.webp" lazy-load placeholder="../../static/default.png"></u-image>

可以看到，当lazy-load属性为true时，u-image会在页面滚动到可见区域时加载图片。