EducaSwift

We already know how to load images from Assets folder, but if need to load an image from an url then we need to use AsyncImage component:

AsyncImage(url: URL(string: "https://educaswift.com/public/samples/products/1/thumbnail.jpg"))
	.frame(width: 150, height: 150)

This component expects an URL type parameter, that we can initialize with our url.

While the image is loading, the component shows a standard placeholder.

Then the image appears when it's ready.

As you can see, the image loads at its original size, but we can apply resizable() modifier if we use a different initializer. This initializer expects a custom placerholder as well.

AsyncImage(url: URL(string: "https://educaswift.com/public/samples/products/1/thumbnail.jpg")) { image in
    image
        .resizable()
        .aspectRatio(contentMode: .fill)
} placeholder: {
    ProgressView()
}
.frame(width: 150, height: 150)

Quiz Time!

Next Question

Your Score:

Repeat

Share