Tải hình ảnh

Tải hình ảnh từ ổ đĩa

Sử dụng thành phần kết hợp Image để hiển thị hình ảnh trên màn hình. Để tải một hình ảnh (ví dụ: PNG, JPEG, WEBP) hoặc tài nguyên vectơ từ ổ đĩa, hãy sử dụng API painterResource với tham chiếu hình ảnh. Bạn không cần biết kiểu thành phần, chỉ cần sử dụng painterResource trong đối tượng sửa đổi Image hoặc paint.

DrawScope:

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description)
)
LoadingImagesSnippets.kt

Để đảm bảo ứng dụng của bạn có thể truy cập được, hãy cung cấp contentDescription cho các phần tử hình ảnh trên màn hình. TalkBack sẽ đọc to phần mô tả nội dung, vì vậy, bạn phải đảm bảo rằng văn bản có ý nghĩa nếu được đọc to và dịch. Trong ví dụ trên, stringResource() được dùng để tải phần mô tả nội dung đã dịch từ tệp strings.xml. Nếu phần tử hình ảnh trên màn hình chỉ nhằm mục đích trang trí cho hình ảnh, hãy đặt contentDescription thành null để trình đọc màn hình bỏ qua phần tử đó.

Nếu cần chức năng cụ thể của ImageBitmap ở cấp thấp hơn, bạn có thể dùng ImageBitmap.imageResource() để tải Bitmap. Để biết thêm thông tin về ImageBitmaps, hãy đọc phần ImageBitmap và ImageVector.

Hỗ trợ đối tượng có thể vẽ

painterResource hiện hỗ trợ các loại đối tượng có thể vẽ sau đây:

• AnimatedVectorDrawable
• BitmapDrawable (PNG, JPG, WEBP)
• ColorDrawable
• VectorDrawable

Tải hình ảnh từ Internet

Nếu muốn tải hình ảnh từ Internet, bạn có thể dùng một số thư viện của bên thứ ba để xử lý quy trình này. Thư viện tải hình ảnh thực hiện rất nhiều công việc khó khăn cho bạn: xử lý cả logic lưu vào bộ nhớ đệm (để bạn không tải hình ảnh xuống nhiều lần) lẫn logic kết nối mạng để tải hình ảnh xuống và hiển thị hình ảnh đó trên màn hình.

Ví dụ: Nếu bạn muốn tải hình ảnh bằng Coil của Instacart, hãy thêm thư viện vào tệp gradle và dùng AsyncImage để tải hình ảnh từ URL:

AsyncImage(
    model = "https://example.com/image.jpg",
    contentDescription = "Translated description of what the image contains"
)
LoadingImagesSnippets.kt

Đề xuất cho bạn

• Lưu ý: văn bản có đường liên kết sẽ hiện khi JavaScript tắt
• Tài nguyên trong Compose
• Hỗ trợ tiếp cận trong Compose
• Đồ hoạ trong Compose