The <image> component is used for image display.
Since: 1.0.0
The default width and height of the <image> component are 320 px and 240 px, respectively.
Name | Type | Default Value | Mandatory | Description |
|---|---|---|---|---|
src | string | - | Yes | Image resource address. Online and local resources in the following image formats are supported: PNG, JPG, JPEG, GIF, SVG, BMP, and WebP. |
mode | string | scaleToFill | No | Cropping and scaling modes for images. For details, see "Valid mode values" below. |
binderror | eventhandle | - | No | Triggered when an error occurs. The format is event.detail = {errMsg}. |
bindload | eventhandle | - | No | Triggered when the image is fully loaded. The format is event.detail = {height, width}. |
lazy-load | boolean | false | No | Whether images are lazy-loaded, that is, whether they are loaded only when they come into view. Since: 1.0.9 |
Valid mode values
Value | Description |
|---|---|
scaleToFill | Scaling mode that stretches the image to completely fill the <image> element, without preserving the aspect ratio. |
aspectFit | Scaling mode that maintains the aspect ratio and ensures the entire image is visible by fitting the longer side of the <image> element. |
aspectFill | Scaling mode that maintains the aspect ratio and ensures the shorter side of the image is fully visible (either horizontally or vertically), with potential cropping in the other direction. |
widthFix | Scaling mode that keeps the width unchanged and adjusts the height to maintain the original aspect ratio. |
heightFix | Scaling mode that keeps the height unchanged and adjusts the width to maintain the original aspect ratio. |
top | Cropping mode that displays only the top part of the image without scaling. |
bottom | Cropping mode that displays only the bottom part of the image without scaling. |
center | Cropping mode that displays only the central part of the image without scaling. |
left | Cropping mode that displays only the left part of the image without scaling. |
right | Cropping mode that displays only the right part of the image without scaling. |
top left | Cropping mode that displays only the top left part of the image without scaling. |
top right | Cropping mode that displays only the top right part of the image without scaling. |
bottom left | Cropping mode that displays only the bottom left part of the image without scaling. |
bottom right | Cropping mode that displays only the bottom right part of the image without scaling. |
HXML file:
<view>
<view has:for="{{array}}" has:for-item="item">
<view>{{item.text}}</view>
<view>
<image
style="width: 200px; height: 200px; background-color: #eeeeee"
mode="{{item.mode}}"
src="{{src}}"
></image>
</view>
</view>
</view> JS file:
Page({
data: {
array: [
{
mode: "scaleToFill",
text: "scaleToFill: stretches the image to completely fill the <image> element, without preserving the aspect ratio",
},
{
mode: "aspectFit",
text: "aspectFit: maintains the aspect ratio and ensures the entire image is visible by fitting the longer side of the <image> element",
},
{
mode: "aspectFill",
text: "aspectFill: maintains the aspect ratio and ensures the shorter side of the image is fully visible",
},
{
mode: "widthFix",
text: "widthFix: keeps the width unchanged and adjusts the height to maintain the original aspect ratio",
},
{
mode: "top",
text: "top: displays only the top part of the image without scaling",
},
{
mode: "bottom",
text: "bottom: displays only the bottom part of the image without scaling",
},
{
mode: "center",
text: "center: displays only the central part of the image without scaling",
},
{
mode: "left",
text: "left: displays only the left part of the image without scaling",
},
{
mode: "right",
text: "right: displays only the right part of the image without scaling",
},
{
mode: "top left",
text: "top left: displays only the top left part of the image without scaling",
},
{
mode: "top right",
text: "top right: displays only the top right part of the image without scaling",
},
{
mode: "bottom left",
text: "bottom left: displays only the bottom left part of the image without scaling",
},
{
mode: "bottom right",
text: "bottom right: displays only the bottom right part of the image without scaling",
},
],
src: "https://www.example.com/example.jpg", // Replace the example with the actual image resource address.
},
binderror: function (e) {
console.log("Loading failed");
},
bindload: function (e) {
console.log("Loading completed");
},
});