如何使用 image 组件显示图片？

推荐答案

<image src="https://example.com/image.jpg" mode="aspectFill" />

本题详细解读

1. image 组件的基本用法

image 组件是微信小程序中用于显示图片的组件。它的基本用法是通过 src 属性指定图片的 URL。例如：

<image src="https://example.com/image.jpg" />

2. mode 属性

mode 属性用于控制图片的显示模式。常见的模式包括：

• scaleToFill：不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素。
• aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来。
• aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来。
• widthFix：宽度不变，高度自动变化，保持原图宽高比不变。

例如，使用 aspectFill 模式：

<image src="https://example.com/image.jpg" mode="aspectFill" />

3. 其他常用属性

• lazy-load：图片懒加载，在即将进入一定范围（上下三屏）时才开始加载。
• binderror：当图片加载失败时触发的事件。
• bindload：当图片加载完成时触发的事件。

例如，使用 lazy-load 和 bindload：

<image src="https://example.com/image.jpg" mode="aspectFill" lazy-load bindload="onImageLoad" />

4. 注意事项

• image 组件默认宽度为 300px，高度为 225px。
• 如果图片的 URL 是动态的，可以通过数据绑定来实现：

<image src="{{imageUrl}}" mode="aspectFill" />

在对应的 .js 文件中：

Page({
  data: {
    imageUrl: 'https://example.com/image.jpg'
  }
});