Tải hình ảnh
Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang
Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
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)
)
Để đả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:
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"
)
Coil
Thư viện tải hình ảnh được hỗ trợ bởi Kotlin Coroutine (Instacart).
Glide
Thư viện tải hình ảnh nhanh và hiệu quả cho Android, tập trung vào khả năng cuộn mượt mà (Google).
Tài nguyên khác
Đề xuất cho bạn
Nội dung và mã mẫu trên trang này phải tuân thủ các giấy phép như mô tả trong phần Giấy phép nội dung. Java và OpenJDK là nhãn hiệu hoặc nhãn hiệu đã đăng ký của Oracle và/hoặc đơn vị liên kết của Oracle.
Cập nhật lần gần đây nhất: 2025-08-25 UTC.
[[["Dễ hiểu","easyToUnderstand","thumb-up"],["Giúp tôi giải quyết được vấn đề","solvedMyProblem","thumb-up"],["Khác","otherUp","thumb-up"]],[["Thiếu thông tin tôi cần","missingTheInformationINeed","thumb-down"],["Quá phức tạp/quá nhiều bước","tooComplicatedTooManySteps","thumb-down"],["Đã lỗi thời","outOfDate","thumb-down"],["Vấn đề về bản dịch","translationIssue","thumb-down"],["Vấn đề về mẫu/mã","samplesCodeIssue","thumb-down"],["Khác","otherDown","thumb-down"]],["Cập nhật lần gần đây nhất: 2025-08-25 UTC."],[],[],null,["Load an image from the disk\n\nUse the [`Image`](/reference/kotlin/androidx/compose/foundation/package-summary#Image) composable to display a graphic on screen. To load an image\n(for example: PNG, JPEG, WEBP) or vector resource from the disk, use the\n[`painterResource`](/develop/ui/compose/quick-guides/content/load-images?hl=en) API with your image reference. You don't need to know the type\nof the asset, just use `painterResource` in `Image` or `paint` modifiers.\n\n`DrawScope`:\n\n\n```kotlin\nImage(\n painter = painterResource(id = R.drawable.dog),\n contentDescription = stringResource(id = R.string.dog_content_description)\n)https://github.com/android/snippets/blob/5673ffc60b614daf028ee936227128eb8c4f9781/compose/snippets/src/main/java/com/example/compose/snippets/images/LoadingImagesSnippets.kt#L49-L52\n```\n\n\u003cbr /\u003e\n\nTo ensure that your app is [accessible](/develop/ui/compose/accessibility), supply a `contentDescription` for\nvisual elements on screen. TalkBack reads out the content description, so you\nmust ensure that the text is meaningful if read out loud and translated. In the\nabove example, a `stringResource()` is used to load up the translated content\ndescription from the `strings.xml` file. If your visual element on screen is\npurely for visual decoration, set your `contentDescription` to `null` for the\nscreen reader to ignore it.\n\nIf you need lower-level `ImageBitmap` specific functionality, you can use\n`ImageBitmap.imageResource()` to load up a Bitmap. For more information on\nImageBitmaps, read the [ImageBitmap versus ImageVector](/develop/ui/compose/graphics/images/compare) section.\n\nDrawable support\n\n`painterResource` currently supports the following drawable types:\n\n- [`AnimatedVectorDrawable`](/reference/android/graphics/drawable/AnimatedVectorDrawable)\n- [`BitmapDrawable`](/reference/android/graphics/drawable/BitmapDrawable) (PNG, JPG, WEBP)\n- [`ColorDrawable`](/reference/android/graphics/drawable/ColorDrawable)\n- [`VectorDrawable`](/reference/android/graphics/drawable/VectorDrawable)\n\nLoad an image from the internet\n\nTo load an image from the internet, there are several third-party libraries\navailable to help you handle the process. Image loading libraries do a lot of\nthe heavy lifting for you; they handle both caching (so you don't download the\nimage multiple times) and networking logic to download the image and display it\non screen.\n\nFor example, to load an image with [Coil](https://github.com/coil-kt/coil#jetpack-compose)\nfrom Instacart, add the library to your gradle file, and use an `AsyncImage` to load an image from a URL:\n\n\n```kotlin\nAsyncImage(\n model = \"https://example.com/image.jpg\",\n contentDescription = \"Translated description of what the image contains\"\n)https://github.com/android/snippets/blob/5673ffc60b614daf028ee936227128eb8c4f9781/compose/snippets/src/main/java/com/example/compose/snippets/images/LoadingImagesSnippets.kt#L60-L63\n```\n\n\u003cbr /\u003e\n\n[Coil](https://github.com/coil-kt/coil#jetpack-compose)\n\nAn image loading library backed by Kotlin Coroutines (Instacart). \n[](https://search.maven.org/artifact/io.coil-kt/coil-compose \"Maven version of the library\") \n[Glide](https://bumptech.github.io/glide/int/compose.html)\n\nA fast and efficient image loading library for Android focused on smooth scrolling (Google). \n[](https://search.maven.org/artifact/com.github.bumptech.glide/compose \"Maven version of the library\")\n\nAdditional resources\n\n- [Load and display images](/develop/ui/compose/quick-guides/content/load-images?hl=en)\n\nRecommended for you\n\n- Note: link text is displayed when JavaScript is off\n- [Resources in Compose](/develop/ui/compose/resources)\n- [Accessibility in Compose](/develop/ui/compose/accessibility)\n- [Graphics in Compose](/develop/ui/compose/graphics/draw/overview)"]]