กำลังโหลดรูปภาพ
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
โหลดรูปภาพจากดิสก์
ใช้ฟังก์ชันที่ประกอบกันได้ Image เพื่อแสดงกราฟิกบนหน้าจอ หากต้องการโหลดรูปภาพ
(เช่น PNG, JPEG, WEBP) หรือทรัพยากรเวกเตอร์จากดิสก์ ให้ใช้ API painterResource กับการอ้างอิงรูปภาพ คุณไม่จำเป็นต้องทราบประเภท
ของชิ้นงาน เพียงใช้ painterResource ในตัวแก้ไข Image หรือ paint
DrawScope:
Image(
painter = painterResource(id = R.drawable.dog),
contentDescription = stringResource(id = R.string.dog_content_description)
)
ระบุcontentDescriptionสำหรับ
องค์ประกอบภาพบนหน้าจอเพื่อให้มั่นใจว่าแอปของคุณเข้าถึงได้ TalkBack จะอ่านคำอธิบายเนื้อหา ดังนั้นคุณ
ต้องตรวจสอบว่าข้อความมีความหมายหากอ่านออกเสียงและแปล ในตัวอย่างด้านบน มีการใช้ stringResource() เพื่อโหลดคำอธิบายเนื้อหาที่แปลแล้วจากไฟล์ strings.xml หากองค์ประกอบภาพบนหน้าจอมีไว้เพื่อการตกแต่งภาพเท่านั้น ให้ตั้งค่า contentDescription เป็น null เพื่อให้โปรแกรมอ่านหน้าจอไม่สนใจองค์ประกอบดังกล่าว
หากต้องการฟังก์ชันการทำงานที่เจาะจงในระดับล่างกว่า ImageBitmap คุณสามารถใช้
ImageBitmap.imageResource() เพื่อโหลดบิตแมปได้ ดูข้อมูลเพิ่มเติมเกี่ยวกับ
ImageBitmap ได้ที่ส่วนImageBitmap กับ ImageVector
การรองรับ Drawable
painterResource รองรับ Drawable ประเภทต่อไปนี้ในปัจจุบัน
โหลดรูปภาพจากอินเทอร์เน็ต
หากต้องการโหลดรูปภาพจากอินเทอร์เน็ต คุณสามารถใช้ไลบรารีของบุคคลที่สามหลายรายการ
เพื่อช่วยจัดการกระบวนการนี้ได้ ไลบรารีการโหลดรูปภาพจะช่วยคุณจัดการงานหนักๆ หลายอย่าง โดยจะจัดการทั้งการแคช (คุณจึงไม่ต้องดาวน์โหลดรูปภาพหลายครั้ง) และตรรกะเครือข่ายเพื่อดาวน์โหลดรูปภาพและแสดงบนหน้าจอ
เช่น หากต้องการโหลดรูปภาพด้วย Coil
จาก Instacart ให้เพิ่มไลบรารีลงในไฟล์ Gradle แล้วใช้ AsyncImage เพื่อโหลดรูปภาพจาก URL
AsyncImage(
model = "https://example.com/image.jpg",
contentDescription = "Translated description of what the image contains"
)
ขดลวด
ไลบรารีการโหลดรูปภาพที่ขับเคลื่อนโดย Kotlin Coroutines (Instacart)
Glide
ไลบรารีการโหลดรูปภาพที่รวดเร็วและมีประสิทธิภาพสำหรับ Android ซึ่งมุ่งเน้นการเลื่อนที่ราบรื่น (Google)
แหล่งข้อมูลเพิ่มเติม
แนะนำสำหรับคุณ
ตัวอย่างเนื้อหาและโค้ดในหน้าเว็บนี้ขึ้นอยู่กับใบอนุญาตที่อธิบายไว้ในใบอนุญาตการใช้เนื้อหา Java และ OpenJDK เป็นเครื่องหมายการค้าหรือเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2025-08-25 UTC
[[["เข้าใจง่าย","easyToUnderstand","thumb-up"],["แก้ปัญหาของฉันได้","solvedMyProblem","thumb-up"],["อื่นๆ","otherUp","thumb-up"]],[["ไม่มีข้อมูลที่ฉันต้องการ","missingTheInformationINeed","thumb-down"],["ซับซ้อนเกินไป/มีหลายขั้นตอนมากเกินไป","tooComplicatedTooManySteps","thumb-down"],["ล้าสมัย","outOfDate","thumb-down"],["ปัญหาเกี่ยวกับการแปล","translationIssue","thumb-down"],["ตัวอย่าง/ปัญหาเกี่ยวกับโค้ด","samplesCodeIssue","thumb-down"],["อื่นๆ","otherDown","thumb-down"]],["อัปเดตล่าสุด 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)"]]
