Chargement des images
Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Charger une image à partir du disque
Utilisez le composable Image pour afficher une image à l'écran. Pour charger une image (par exemple, PNG, JPEG, WEBP) ou une ressource vectorielle à partir du disque, utilisez l'API painterResource avec la référence de votre image. Vous n'avez pas besoin de connaître le type de l'élément, il vous suffit d'utiliser painterResource dans les modificateurs Image ou paint.
DrawScope :
Image(
painter = painterResource(id = R.drawable.dog),
contentDescription = stringResource(id = R.string.dog_content_description)
)
Afin de vous assurer que votre application est accessible, utilisez une contentDescription pour les éléments visuels à l'écran. TalkBack lit la description du contenu, vous devez donc vous assurer que le texte est compréhensible lorsqu'il est lu à haute voix. Dans l'exemple ci-dessus, une stringResource() est utilisé pour charger la traduction de la description du contenu à partir du fichier strings.xml. Si votre élément visuel à l'écran ne remplit qu'une fonction cosmétique, définissez contentDescription sur null pour que le lecteur d'écran l'ignore.
Si vous avez besoin de fonctionnalités ImageBitmap spécifiques de niveau inférieur, vous pouvez utiliser ImageBitmap.imageResource() pour charger un bitmap. Pour en savoir plus sur ImageBitmaps, consultez la section ImageBitmap et ImageVector.
Compatibilité avec les drawables
painterResource est actuellement compatible avec les types de drawables suivants :
Charger une image depuis Internet
Pour charger une image depuis Internet, plusieurs bibliothèques tierces peuvent vous aider à gérer le processus. Les bibliothèques de chargement d'images font le plus gros du travail pour vous. Elles gèrent à la fois la mise en cache (afin de ne pas télécharger l'image plusieurs fois) et la logique réseau pour télécharger l'image et l'afficher à l'écran.
Par exemple, pour charger une image avec Coil à partir d'Instacart, ajoutez la bibliothèque à votre fichier Gradle, puis utilisez une AsyncImage pour charger une image à partir d'une URL.
AsyncImage(
model = "https://example.com/image.jpg",
contentDescription = "Translated description of what the image contains"
)
Coil
Bibliothèque de chargement d'images reposant sur des coroutines Kotlin (Instacart).
Glide
Bibliothèque de chargement d'images rapide et efficace pour Android axée sur le défilement fluide (Google).
Ressources supplémentaires
Recommandations personnalisées
Le contenu et les exemples de code de cette page sont soumis aux licences décrites dans la Licence de contenu. Java et OpenJDK sont des marques ou des marques déposées d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2025/08/28 (UTC).
[[["Facile à comprendre","easyToUnderstand","thumb-up"],["J'ai pu résoudre mon problème","solvedMyProblem","thumb-up"],["Autre","otherUp","thumb-up"]],[["Il n'y a pas l'information dont j'ai besoin","missingTheInformationINeed","thumb-down"],["Trop compliqué/Trop d'étapes","tooComplicatedTooManySteps","thumb-down"],["Obsolète","outOfDate","thumb-down"],["Problème de traduction","translationIssue","thumb-down"],["Mauvais exemple/Erreur de code","samplesCodeIssue","thumb-down"],["Autre","otherDown","thumb-down"]],["Dernière mise à jour le 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)"]]
