Chargement des images

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)
)
LoadingImagesSnippets.kt

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 :

• AnimatedVectorDrawable
• BitmapDrawable (PNG, JPG, WEBP)
• ColorDrawable
• VectorDrawable

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 et utilisez un AsyncImage pour charger une image à partir d'une URL:

AsyncImage(
    model = "https://example.com/image.jpg",
    contentDescription = "Translated description of what the image contains"
)
LoadingImagesSnippets.kt

Recommandations personnalisées

• Remarque : Le texte du lien s'affiche lorsque JavaScript est désactivé
• Ressources dans Compose
• Accessibilité dans Compose
• Éléments graphiques dans Compose