在微信小程序中，image 组件用于显示图片。以下是一些基本的 image 组件的用法：

1. 显示图片：
   <image src="http://example.com/image.jpg" mode="aspectFit"></image>
   使用 src 属性设置图片的地址，并通过 mode 属性设置图片展示模式，比如 aspectFit 表示保持宽高比缩放图片，使图片完全显示在 <image> 组件中。

2. 点击事件：
   <image src="http://example.com/image.jpg" bindtap="onImageTap"></image>
   通过 bindtap 绑定图片点击事件，在对应的 .js 文件中定义相应的函数。

3. 显示本地图片：
   <image src="/images/local-image.jpg" mode="aspectFit"></image>
   使用相对路径显示小程序本地图片，路径从小程序根目录开始。

4. 设置宽高：
   <image src="http://example.com/image.jpg" mode="aspectFit" style="width: 200px; height: 150px;"></image>
   使用 style 属性设置图片的宽度和高度。

5. 懒加载：
   <image src="http://example.com/image.jpg" lazy-load></image>
   使用 lazy-load 属性实现图片的懒加载，当图片进入可视区域时才开始加载。

6. 加载失败处理：
   <image src="http://example.com/image.jpg" binderror="onImageError"></image>
   通过 binderror 绑定图片加载失败的事件，在对应的 .js 文件中定义相应的函数。

在对应的 .js 文件中，你可以定义相应的事件处理函数：
Page({
  onImageTap: function () {
    console.log('图片被点击');
  },

  onImageError: function (e) {
    console.log('图片加载失败', e.detail.errMsg);
  },
});

这是一个基本的 image 组件的用法示例。根据实际需求，你还可以了解更多 image 组件的属性和事件，以满足不同场景的需求。


转载请注明出处：http://www.pingtaimeng.com/article/detail/818/微信小程序