Imágenes de carga
Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
Carga una imagen desde el disco
Usa el elemento componible Image para mostrar un gráfico en la pantalla. Para cargar una imagen (por ejemplo: PNG, JPEG, WEBP) o un recurso vectorial del disco, usa la API de painterResource con tu imagen de referencia. No necesitas conocer el tipo de recurso. Simplemente usa painterResource en modificadores Image o paint.
DrawScope:
Image(
painter = painterResource(id = R.drawable.dog),
contentDescription = stringResource(id = R.string.dog_content_description)
)
Para asegurarte de que tu app sea accesible, proporciona un contentDescription para los elementos visuales en pantalla. TalkBack lee la descripción del contenido, por lo que debes asegurarte de que el texto sea significativo si se lee en voz alta y se traduce. En el ejemplo anterior, se usa un stringResource() para cargar la descripción del contenido traducido desde el archivo strings.xml. Si tu elemento visual en pantalla es puramente decorativo, configura contentDescription en null para que el lector de pantalla lo ignore.
Si necesitas una funcionalidad específica de ImageBitmap de nivel inferior, puedes usar ImageBitmap.imageResource() para cargar un mapa de bits. Para obtener más información sobre ImageBitmaps, consulta la sección ImageBitmap vs. ImageVector.
Compatibilidad con elementos de diseño
Actualmente, painterResource admite los siguientes tipos de elementos de diseño:
Carga una imagen desde Internet
Para cargar una imagen desde Internet, hay varias bibliotecas de terceros disponibles que te ayudarán a controlar el proceso. Las bibliotecas de carga de imágenes hacen gran parte del trabajo pesado por ti: manejan la caché (para que no descargues la imagen varias veces) y la lógica de red para descargarla y mostrarla en la pantalla.
Por ejemplo, para cargar una imagen con Coil de Instacart, agrega la biblioteca a tu archivo Gradle y usa un AsyncImage para cargarla desde una URL:
AsyncImage(
model = "https://example.com/image.jpg",
contentDescription = "Translated description of what the image contains"
)
Coil
Biblioteca de carga de imágenes respaldada por corrutinas de Kotlin (Instacart).
Glide
Una biblioteca de carga de imágenes rápida y eficiente para Android enfocada en un desplazamiento fluido (Google).
Recursos adicionales
Recomendaciones para ti
El contenido y las muestras de código que aparecen en esta página están sujetas a las licencias que se describen en la Licencia de Contenido. Java y OpenJDK son marcas registradas de Oracle o sus afiliados.
Última actualización: 2025-08-28 (UTC)
[[["Fácil de comprender","easyToUnderstand","thumb-up"],["Resolvió mi problema","solvedMyProblem","thumb-up"],["Otro","otherUp","thumb-up"]],[["Falta la información que necesito","missingTheInformationINeed","thumb-down"],["Muy complicado o demasiados pasos","tooComplicatedTooManySteps","thumb-down"],["Desactualizado","outOfDate","thumb-down"],["Problema de traducción","translationIssue","thumb-down"],["Problema con las muestras o los códigos","samplesCodeIssue","thumb-down"],["Otro","otherDown","thumb-down"]],["Última actualización: 2025-08-28 (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/dd30aee903e8c247786c064faab1a9ca8d10b46e/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/dd30aee903e8c247786c064faab1a9ca8d10b46e/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)"]]
