Como carregar imagens
Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
Carregar uma imagem do disco
Use o elemento combinável Image para mostrar um gráfico na tela. Para carregar uma imagem
(por exemplo, PNG, JPEG, WEBP) ou um recurso vetorial do disco, use a
API painterResource com a referência necessária. Não é preciso saber o tipo
do recurso, basta usar a painterResource nos modificadores Image ou paint.
DrawScope:
Image(
painter = painterResource(id = R.drawable.dog),
contentDescription = stringResource(id = R.string.dog_content_description)
)
Para garantir que o app seja acessível, forneça uma contentDescription para
elementos visuais na tela. O TalkBack lê a descrição do conteúdo. Portanto, você
precisa garantir que o texto seja significativo se lido em voz alta e traduzido. No
exemplo acima, um stringResource() é usado para carregar a descrição de conteúdo
traduzida do arquivo strings.xml. Se o elemento visual na tela for
puramente para decoração visual, defina contentDescription como null para que
o leitor de tela a ignore.
Se você precisar de uma funcionalidade específica de ImageBitmap de nível inferior, use
ImageBitmap.imageResource() para carregar um bitmap. Para saber mais sobre
ImageBitmaps, leia a seção ImageBitmap versus ImageVector.
Suporte a drawables
No momento, o painterResource tem suporte aos seguintes tipos de drawable:
Carregar uma imagem da Internet
Para carregar uma imagem da Internet, há várias bibliotecas de terceiros disponíveis
para ajudar você a lidar com o processo. As bibliotecas de carregamento de imagens fazem grande parte
do trabalho pesado para você. Elas processam o armazenamento em cache (para não fazer o download da
imagem várias vezes) e a lógica da rede para fazer o download da imagem e mostrá-la
na tela.
Por exemplo, para carregar uma imagem com Coil
da Instacart, adicione a biblioteca ao arquivo do Gradle e use uma AsyncImage para carregar uma imagem de um URL:
AsyncImage(
model = "https://example.com/image.jpg",
contentDescription = "Translated description of what the image contains"
)
Coil
Uma biblioteca de carregamento de imagens fornecida pelas corrotinas do Kotlin (Instacart).
Glide
Uma biblioteca de carregamento rápido e eficiente de imagens para Android com foco em rolagem suave (Google).
Outros recursos
Recomendados para você
O conteúdo e os exemplos de código nesta página estão sujeitos às licenças descritas na Licença de conteúdo. Java e OpenJDK são marcas registradas da Oracle e/ou suas afiliadas.
Última atualização 2025-08-28 UTC.
[[["Fácil de entender","easyToUnderstand","thumb-up"],["Meu problema foi resolvido","solvedMyProblem","thumb-up"],["Outro","otherUp","thumb-up"]],[["Não contém as informações de que eu preciso","missingTheInformationINeed","thumb-down"],["Muito complicado / etapas demais","tooComplicatedTooManySteps","thumb-down"],["Desatualizado","outOfDate","thumb-down"],["Problema na tradução","translationIssue","thumb-down"],["Problema com as amostras / o código","samplesCodeIssue","thumb-down"],["Outro","otherDown","thumb-down"]],["Última atualização 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)"]]
