Mostrar imágenes de forma dinámica y eficiente con LazyVGrid

A partir de iOS15+ ahora existe la opción de usar AsyncImage algo así, por lo que no sería estrictamente necesario utilizar Kingfisher

AsyncImage(url: URL(string: "https://example.com/icon.png"))
    .frame(width: 200, height: 200)

En la nueva versión de Xcode (13), la forma de agregar librerías (paquetes) es:
Menu File -> Add Packages… -> En la siguiente ventana, en el campo de “Buscar”, se coloca la URL de la librería (en este caso "https://github.com/onevcat/Kingfisher.git), se selecciona el botón “Add Package”. Después de terminar el Feching, se vuelve a seleccionar el botón “Add Package”… y listo!
Aquí un breve video del proceso: https://youtu.be/bN0AkBT-C7M

Esta es la URL del repo de la dependencia de Swift que hay que añadir:

https://github.com/onevcat/Kingfisher.git

(También la puedes encontrar en los recursos de la clase 😉 )

• Si usan AsynImage puede no funcionar resizable(). Entonces pueden usar lo siguiente.

• Yo le deje el Text que el profe Juan había puesto para probar como se veía.

// Imagen y título de cada juego.
                                VStack
                                {
                                    AsyncImage( url: URL( string: juego.galleryImages[0] )!  )
                                    { image in
                                        image
                                            .resizable()
                                            .aspectRatio(contentMode: .fit)
                                            .clipShape(RoundedRectangle(cornerRadius: 15))
                                            .padding()
                                    } placeholder: {
                                        placeholderImage()
                                    }
                                        
                                        
                                    Text("\(juego.title)").foregroundColor(.white)
                                        .font(.body)
                                        .padding(.bottom, 12.0)
                                    
                                }

• Pero es necesaria esta función, que cargara un View por si no puede tomar la imagen del servidor. Mientras carga pone el símbolo de cámara del SF symbols

// 
@ViewBuilder
    func placeholderImage() -> some View {
        Image(systemName: "photo")
            .renderingMode(.template)
            .resizable()
            .aspectRatio(contentMode: .fit)
    
            .frame(width: 150, height: 150)
            .foregroundColor(.gray)
    }

• Y queda así:

Dejo modificación del botón por si alguien quiere tener el texto…
dejo código del botón y código de una función

Button(action: {
                                gameVO = GameViewObject(game: juego)
                                print("Pulse el juego \(gameVO!.title)")
                            }, label: {
                                
                                VStack {
                                    KFImage(URL(string: juego.galleryImages[0])!).resizable().aspectRatio(contentMode: .fit).clipShape(RoundedRectangle.init(cornerRadius: 4)).padding(.bottom, 8)//.frame(maxHeight: 100, alignment: .center)
                                    
//                                    Text("\(juego.title)")
                                    Text(cortarString(24, textoIn:juego.title)).font(.footnote).foregroundColor(.white).padding(EdgeInsets(top: 16, leading: 0, bottom: 30, trailing: 0))
                                    
                                }//.frame(maxHeight: 100, alignment: .center)
                                
                            })

func cortarString(_ cantidad: Int, textoIn:String) -> String {
    var stringToReturn:String = ""
    let mySubstring = textoIn.prefix(cantidad)

    stringToReturn = String(mySubstring)
    
    if textoIn.count > cantidad {
        stringToReturn = stringToReturn + "..."
    }

//    print("Texto entero \(textoIn)")
//    print("Texto cortado \(mySubstring)")
//    print("Texto a retornar \(stringToReturn)")
    return String(stringToReturn)
}