Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
Para mostrar imagens no app para conteúdo e respostas a ações do usuário,
carregue as imagens do disco ou de uma fonte externa na Internet. É
possível carregar imagens das seguintes maneiras:
Do disco
De uma rede que usa o Coil
De uma rede usando o Glide
Compatibilidade de versões
Essa implementação exige que o minSDK do projeto seja definido como nível 21 da API ou
mais recente.
Carregar uma imagem do disco
É possível carregar imagens armazenadas localmente do disco para exibi-las no app para
conteúdo e responder às ações do usuário.
Dependências
Carregar a imagem
Use o código abaixo para carregar uma imagem armazenada localmente do disco para exibição
no app:
Um objeto Image do Compose definido com um atributo painter definido como um
painterResource() que carrega uma imagem dos recursos do app.
Um contentDescription que o TalkBack pode ler para deixar seu app mais
acessível.
Um stringResource() para carregar a descrição do conteúdo traduzido do
arquivo strings.xml.
Carregar uma imagem pela rede
É possível carregar imagens armazenadas externamente na Internet usando o Coil ou o
Glide. Para escolher qual biblioteca usar no seu projeto, considere fatores como
requisitos do projeto e restrições de desempenho.
Carregar uma imagem usando a Coil
É possível carregar imagens da Internet usando o Coil, uma biblioteca
de terceiros. O Coil é fornecido por corrotinas do Kotlin e é responsável por
carregar a imagem fora da linha de execução principal e mostrá-la após o carregamento. Siga
estas orientações para carregar imagens da Internet usando o Coil.
Dependências
Carregar a imagem
Use o seguinte código para carregar imagens usando o Coil:
AsyncImage(model="https://example.com/image.jpg",contentDescription="Translated description of what the image contains")
É possível carregar imagens armazenadas externamente na Internet usando o
Glide para exibi-las no feed do app. O Glide é uma biblioteca de carregamento de imagens rápida e
eficiente para Android com foco em rolagem suave. Ele
assume a responsabilidade de carregar a imagem fora da linha de execução principal e
a exibe depois de carregada.
Dependências
Carregar a imagem
Use o seguinte código para carregar imagens usando o Glide:
GlideImage(model="https://example.com/image.jpg",contentDescription="Translated description of what the image contains")
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-02-22 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-02-22 UTC."],[],[],null,["# Load and display images\n\n\u003cbr /\u003e\n\nTo display images in your app for content and for responses to user actions,\nload the images from the disk or from an external source on the internet. You\ncan load images the following ways:\n\n- From the disk\n- From a network using Coil\n- From a network using Glide\n\nVersion compatibility\n---------------------\n\nThis implementation requires that your project minSDK be set to API level 21 or\nhigher.\n\nLoad an image from the disk\n---------------------------\n\nYou can load locally stored images from the disk to display them in your app for\ncontent and to respond to user actions.\n\n### Dependencies\n\n### Kotlin\n\n\u003cbr /\u003e\n\n```kotlin\n implementation(platform(\"androidx.compose:compose-bom:2025.08.00\"))\n \n```\n\n\u003cbr /\u003e\n\n### Groovy\n\n\u003cbr /\u003e\n\n```groovy\n implementation platform('androidx.compose:compose-bom:2025.08.00')\n \n```\n\n\u003cbr /\u003e\n\n### Load the image\n\nUse the following code to load a locally stored image from the disk to display\nin your app:\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\n#### Key points about the code\n\n- A defined Compose [`Image`](/reference/kotlin/androidx/compose/foundation/package-summary#Image) object with a `painter` attribute set to a [`painterResource()`](/reference/kotlin/androidx/compose/ui/res/package-summary#painterresource) that loads an image from app resources.\n- A `contentDescription` that `TalkBack` can read to make your app more accessible.\n- A `stringResource()` to load translated content description from the `strings.xml` file.\n\nLoad an image over the network\n------------------------------\n\nYou can load images stored externally on the internet using either Coil or\nGlide. To choose which library to use for your project, consider factors such as\nproject requirements and performance constraints.\n\n### Load an image using Coil\n\nYou can load images from the internet using [Coil](https://coil-kt.github.io/coil/), a third-party\nlibrary. Coil is backed by Kotlin coroutines, and takes responsibility for\nloading the image away from the Main thread, and displays it once loaded. Follow\nthis guidance to load images from the internet using Coil.\n\n### Dependencies\n\n### Kotlin\n\n\u003cbr /\u003e\n\n```kotlin\n implementation(platform(\"androidx.compose:compose-bom:2025.08.00\"))\n implementation(\"io.coil-kt:coil-compose:2.6.0\")\n \n```\n\n\u003cbr /\u003e\n\n### Groovy\n\n\u003cbr /\u003e\n\n```groovy\n implementation platform('androidx.compose:compose-bom:2025.08.00')\n implementation 'io.coil-kt:coil-compose:2.6.0'\n \n```\n\n\u003cbr /\u003e\n\n#### Load the image\n\nUse the following code to load images using Coil:\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### Load an image using Glide\n\nYou can load images stored externally on the internet using\n[Glide](https://github.com/bumptech/glide) to display them in your app's feed. Glide is a fast and\nefficient image loading library for Android focused on smooth scrolling, and\ntakes responsibility for loading the image away from the Main thread, and\ndisplays it once loaded.\n\n#### Dependencies\n\n### Kotlin\n\n\u003cbr /\u003e\n\n```kotlin\n implementation(platform(\"androidx.compose:compose-bom:2025.08.00\"))\n implementation(\"com.github.bumptech.glide:compose:1.0.0-beta01\")\n \n```\n\n\u003cbr /\u003e\n\n### Groovy\n\n\u003cbr /\u003e\n\n```groovy\n implementation platform('androidx.compose:compose-bom:2025.08.00')\n implementation 'com.github.bumptech.glide:compose:1.0.0-beta01'\n \n```\n\n\u003cbr /\u003e\n\n#### Load the image\n\nUse the following code to load images using Glide:\n\n\n```kotlin\nGlideImage(\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#L72-L75\n```\n\n\u003cbr /\u003e\n\nResults\n-------\n\n:dog: **Figure 1.** An image loaded and displayed.\n\nCollections that contain this guide\n-----------------------------------\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\n### Display images\n\nDiscover techniques for using bright, engaging visuals to give your Android app a beautiful look and feel. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-images) \n\nHave questions or feedback\n--------------------------\n\nGo to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts. \n[Go to FAQ](/quick-guides/faq) [Leave feedback](https://issuetracker.google.com/issues/new?component=1573691&template=1993320)"]]
