Cómo usar AsyncImage en SwiftUI

Marcelo Laprea

17 enero, 20243min de lectura

AsyncImage es una vista de SwiftUI que nos permite cargar de manera asíncrona una imagen. Veamos cómo:

import SwiftUI

struct ContentView: View {
    private let url = URL(string: "https://pbs.twimg.com/profile_images/1717013664954499072/2dcJ0Unw_400x400.png")
    
    var body: some View {
        // 1
        AsyncImage(url: url)
    }
}

Inicializamos la vista AsyncImage pasando como parámetro la URL de la imagen. En caso de que la URL esté mal formada o falle la solicitud, se mostrará una imagen de placeholder de posición por defecto.

Ejemplo de una imagen cargada asíncronamente

Ejemplo del placeholder

Por defecto, AsyncImage renderiza la imagen dependiendo del tamaño de la misma, es decir, no hace ningún ajuste ni cambia el tamaño. Para cambiar el tamaño de la imagen, vamos a usar el inicializador AsyncImage(url: <URL>, content: <(Image) -> View>, placeholder: <() -> View>). Veamos cómo:

import SwiftUI

struct ContentView: View {
    private let url = URL(string: "https://pbs.twimg.com/profile_images/1717013664954499072/2dcJ0Unw_400x400.png")
    
    var body: some View {
        AsyncImage(url: url) { image in
            // 1
            image
                .resizable()
                .frame(width: 100, height: 100)
                .clipShape(Circle())
        } placeholder: {
            // 2
            ProgressView()
                .padding()
                .frame(width: 100, height: 100)
                .background(Color.gray.opacity(0.7))
                .clipShape(Circle())
        }
    }
}

Aquí ya tenemos una vista de tipo Image, por lo que vamos a poder usar todos los modificadores de Image, como por ejemplo resizable(), así como ajustar el tamaño de la imagen cambiando el frame.

Ejemplo de una imagen cargada asíncronamente con AsyncImage, editando su tamaño

Aquí podemos editar el placeholder de posición, que es la vista que aparecerá cuando se esté cargando la imagen o cuando falle la solicitud al descargar la imagen del URL.

Ejemplo de un Placeholder usando AsyncImage

Manejando errores en la descarga de la imagen

En caso de que haya un error en la llamada, la imagen que se mostrará será la indicada en el placeholder de posición. Esto puede generar confusión, ya que podemos pensar que aún se está cargando la imagen. Para ello vamos a usar otro inicializador el cual obtendremos un AsyncImagePhase, que tiene 3 estados:

.success(Image): Nos indica que la descarga fue exitosa, y lo usaremos para mostrar y editar la imagen tal como hicimos en el ejemplo anterior.
.error(Error): Nos indica que hubo un error en la descarga de la imagen.
.empty: Nos indica que la imagen aún no se ha cargado, podemos mostrar nuestro ProgressView.

Veamos como manejar los errores:

import SwiftUI

struct ContentView: View {
    private let url = URL(string: "https://pbs.twimg.com/profile_images/1717013664954499072/2dcJ0Unw_400x400.png")
    
    var body: some View {
        AsyncImage(url: url) { phase in
            switch phase {
            case .success(let image):
                image
                    .resizable()
                    .frame(width: 100, height: 100)
                    .clipShape(Circle())
            case .empty:
                ProgressView()
                    .padding()
                    .frame(width: 100, height: 100)
                    .background(Color.gray.opacity(0.7))
                    .clipShape(Circle())
            case .failure:
                Image(systemName: "xmark.icloud")
                    .frame(width: 100, height: 100)
                    .background(Color.gray.opacity(0.7))
                    .clipShape(Circle())
            @unknown default:
                EmptyView()
            }
        }
    }
}

Ejemplo mostrando un error a la hora de descargar una imagen con AsyncImage

Comparte este artículo

Cómo usar AsyncImage en SwiftUI

Manejando errores en la descarga de la imagen

Translation API: Cómo verificar idiomas soportados

Translation API: Cómo realizar múltiples traducciones

Translation API: Cómo realizar traducciones bajo demanda