Cómo cargar y mostrar imágenes

Para mostrar imágenes en tu app para el contenido y para las respuestas a las acciones del usuario, carga las imágenes desde el disco o desde una fuente externa en Internet. Puedes cargar imágenes de las siguientes maneras:

• Desde el disco
• Desde una red con Coil
• Desde una red con Glide

Resultados

Compatibilidad de versiones

Esta implementación requiere que tu minSDK del proyecto se establezca en el nivel de API 21 o superior.

Carga una imagen desde el disco

Puedes cargar imágenes almacenadas de forma local desde el disco para mostrarlas en tu app para el contenido y responder a las acciones del usuario.

Dependencias

Carga la imagen

Usa el siguiente código para cargar una imagen almacenada de forma local desde el disco para mostrarla en tu app:

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description)
)
LoadingImagesSnippets.kt

Puntos clave sobre el código

• Un objeto Compose definido Image con un atributo painter establecido en un painterResource() que carga una imagen de los recursos de la app
• Una contentDescription que TalkBack puede leer para que tu app sea más accesible
• Un stringResource() para cargar la descripción del contenido traducido desde el archivo strings.xml

Carga una imagen a través de la red

Puedes cargar imágenes almacenadas de forma externa en Internet con Coil o Glide. Para elegir qué biblioteca usar para tu proyecto, considera factores como los requisitos del proyecto y las restricciones de rendimiento.

Carga una imagen con Coil

Puedes cargar imágenes desde Internet con Coil, una biblioteca de terceros. Coil está respaldado por corrutinas de Kotlin y se encarga de cargar la imagen fuera del subproceso principal y la muestra una vez cargada. Sigue esta guía para cargar imágenes desde Internet con Coil.

Dependencias

Carga la imagen

Usa el siguiente código para cargar imágenes con Coil:

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

Carga una imagen con Glide

Puedes cargar imágenes almacenadas de forma externa en Internet con Glide para mostrarlas en el feed de tu app. Glide es una biblioteca de carga de imágenes rápida y eficiente para Android enfocada en un desplazamiento fluido, y se encarga de cargar la imagen fuera del subproceso principal y la muestra una vez cargada.

Dependencias

Carga la imagen

Usa el siguiente código para cargar imágenes con Glide:

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

Colecciones que contienen esta guía

Esta guía forma parte de estas colecciones seleccionadas de guías de inicio rápido que abarcan objetivos más amplios de desarrollo de Android:

Mostrar imágenes

Descubre técnicas para usar imágenes atractivas y brillantes para darle a tu app para Android un aspecto atractivo.

Colección de guías de inicio rápido

¿Tienes preguntas o comentarios?

Ve a nuestra página de preguntas frecuentes y obtén información sobre las guías de inicio rápido o comunícate con nosotros y cuéntanos tu opinión.

Ir a las Preguntas frecuentes Cómo enviar comentarios