Nhảy tới nội dung

image

image component dùng để hiển thị hình ảnh.

Quét mã để trải nghiệm

Xem code mẫu trên Tini Studio

Demo

Trải nghiệm thử với trình giả lập bên dưới

Thuộc tính

Thuộc tínhKiểu dữ liệuMô tả
srcstringĐường dẫn hoặc base64 của hình.
classstringCss class
stylestringInline style
lazy-loadbooleanCho phép lazy load hình
default-sourcestringHình mặc định. Hình này sẽ được hiển thị khi hình trong src đang trong quá trình load hoặc không load được. Trường hợp hình trong src load thất bại, onError sẽ được gọi.
modestringChế độ hiển thị của hình ảnh. Mặc định là scaleToFill. Bạn có thể xem các mode được hỗ trợ bên dưới. Chỉ hỗ trợ version từ 1.76.5 trở lên.
onTapeventSự kiện được kích hoạt khi người tap vào hình. Chỉ hỗ trợ từ version 1.74.22 trở lên
catchTapeventSự kiện được khích hoạt khi tap vào image, tuy nhiên event sẽ không bubble lên parent. Chỉ hỗ trợ từ version 1.74.22 trở lên.
onLoadeventSự kiện được kích hoạt khi hình được tải về thành công, event.detail = { width, height }
onErroreventSự kiện được kích hoạt khi load hình thất bại, event.detail = { errMsg: 'Error message' }

Mode

image component có thể hiển thị hình ảnh ở 14 mode khác nhau, gồm 4 scaling mode và 9 clipping mode.

Scaling mode

Ở chế độ này, hình được scale (phóng to/thu nhỏ), tỷ lệ khung hình có thể

ModeMô tả
scaleToFillHình được scale sao cho cả chiều rộng và chiều cao vừa khít image component, không băt buộc duy trì tỷ lệ khung hình (aspect ratio)
aspectFitHình được scale sao cho cạnh dài hơn của nó vừa khít image component mà vẫn duy trì tỷ lệ khung hình.
aspectFillHình được scale sao cho cạnh ngắn hơn của nó vừa với image component mà vẫn duy trì tỷ lệ khung hình. Giả sử hình có chiều cao ngắn hơn chiều rộng, thì phần bên trái và bên phải của hình không được hiển thị bên trong image component
widthFixWidth của hình sẽ không thay đổi còn height sẽ được tự động (height auto) điều chỉnh cho phù hợp

Clipping mode

Ở chế độ này, kích thước của hình không đổi, chỉ 1 phần của hình được hiển thị nếu chiều cao/chiều rộng của hình lớn hơn component.

ModeMô tả
topPhần trên của hình được hiển thị nếu chiều cao của hình lớn hơn chiều cao của image component.
bottomPhần dưới của hình được hiển thị nếu chiều cao của hình lớn hơn chiều cao của image component.
centerPhần chính giữa hình được hiển thị nếu kích thước hình lớn hơn kích thước của image component.
leftPhần bên trái của hình được hiển thị nếu chiều rộng của hình lớn hơn chiều rộng của image component.
rightPhần bên phải của hình được hiển thị nếu chiều rộng của hình lớn hơn chiều rộng của image component.
top leftPhần trên bên trái của hình được hiển thị nếu kích thước hình lớn hơn kích thước của image component.
top rightPhần trên bên phải của hình được hiển thị nếu kích thước hình lớn hơn kích thước của image component.
bottom leftPhần dưới bên trái của hình được hiển thị nếu kích thước hình lớn hơn kích thước của image component.
bottom rightPhần dưới bên phải của hình được hiển thị nếu kích thước hình lớn hơn kích thước của image component.
Lưu ý
  • Bạn cần khai báo widthheight của image component thông qua inline style hoặc trong tcss, mặc định là width = 300pxheight = 225px. Thuộc tính widthheight sẽ không được kế thừa trong image.
  • Để sử dụng hình với height là auto, bạn có thể dùng mode là widthFix.
  • Nên dùng absolute path cho các đường dẫn của hình.
  • Không nên dùng thuộc tính object-fit trong tcss để canh kích thước cho image mà thay vào đó dùng mode.

Sample Code

index.txml

<view>
<view class="block-content">
<view onTap="onTap" class="component-item">
<image
onLoad="onLoad"
src="/images/app_logo.png"
class="image-item" />
</view>
<view class="component-item">
<image src="https://via.placeholder.com/300.png" />
</view>
</view>
</view>
index.js
Page({
onLoad(e) {
console.log('onLoad', e);
},
onTap(e) {
console.log('onTap', e);
},
onError(e) {
console.log('onError', e);
}
});
index.tcss
.image-item {
width: 100px;
height: 100px;
}