AsyncImage en SwiftUI en Español

AsyncImage en SwiftUI 3.0 es una vista que permite mostrar una imagen solo pasando una URL.

AsyncImage por Código

Vamos a probar esta nueva vista, y como siempre vamos a crear un proyecto de cero en Xcode 13.

Lo primero que vamos hacer es crear una propiedad de tipo URL con esta url https://placebear.com/1000/1000 y dentro de la variable body de ContentView añadimos AsyncImage y usamos el inicializador que solo acepta una URL.
La URL que le vamos a pasar es la que acabamos de crear en nuestra propiedad. Y quedaría de la siguiente manera:

struct ContentView: View {
    private let url = URL(string: "https://placebear.com/1000/1000")!
    
    var body: some View {
        AsyncImage(url: url!)
    }
}

Si tienes algún error como por ejemplo el de la siguiente imagen. Asegúrate de estar usando iOS 15.0.

Para que no te salga este error puedes ir al target de tu app y en General, en la sección "Deployment info" seleccionar iOS 15.0

Si todo está OK, puedes compilar la app y verás que aparece una imagen (depende de tu conexión a internet puede tardar más o menos). Esta imagen que aparece es demasiado grande, vamos a utilizar otro inicializador para poder redimensionar la imagen y añadir un placeholder. Este placeholder nos servirá para darle feedback al user mientras se está descargando la imagen y usaremos un ProgressView.

Vamos a ello, el código quedaría de la siguiente manera:

struct ContentView: View {
    private let url = URL(string: "https://placebear.com/1000/1000")!
    
    var body: some View {
        AsyncImage(url: url) { image in
            image
                .resizable()
                .scaledToFit()
                .cornerRadius(20)
                .padding()
        } placeholder: {
            ProgressView()
        }
    }
}

De esta manera hemos usado la misma URL pero la imagen que hemos recibido la hemos redimensionado con los modificadores que ya vimos cuando hablamos de imágenes en SwiftUI y como ves el resultado ha sido diferente.
También hemos añadido el placeholder que es un progressview que aparece para dar feedback al user de que la imagen se está descargando. Esto podría ser cualquier otra vista, pero hemos aprovechado para poner un ProgressView.