In this tutorial, We’ll learn how to display an image from a URL in SwiftUI. Normally we display images using UIImage view. But in SwiftUI if we want to load an image from a URL we use AsyncImage. It does all the work for us and loads the image from the URL in just a few steps.
What we’ll cover in this blog:
- Loading an image from a URL
- AsyncImage
- Scaling the AsyncImage
- handling errors while loading images from URL
Load an image from a URL in SwiftUI
Syntax:
AsyncImage(url: ))
Let’s see how we’ll use it.
struct ContentView:View{ var body: some View{ AsyncImage(url: URL(string: “https://www.macworld.com/wp-content/uploads/2023/01/swift_1200home-1.jpg?quality=50&strip=all”)) } }
We have created a URL with the URL constructor that takes the string image path as input and converts it into the URL. We passed the string image path in the constructor that we took from the web Image.
Any image path taken from the web can be passed in this string parameter of the URL constructor.
Also check: How to show image in SwiftUI
It will appear like this on the screen way more zoomed in than expected.
We cannot use image modifiers like .resizable, .scaledToFit, etc here on the async image. As the async image is for getting the data of the image from the web, then after it gets the data it converts it to the actual image therefore we cannot modify the image before retrieving it.
So for fixing it, SwiftUI has given us another contractor for async image with a Scale parameter that we use to scale the image for making it smaller or bigger.
Let’s fix the image so that it will fit into the screen using the scale parameter.
struct ContentView:View{ var body: some View{ //AsyncImage(url: URL(string: “https://www.macworld.com/wp-content/uploads/2023/01/swift_1200home-1.jpg?quality=50&strip=all”)) AsyncImage(url: URL(string: “https://www.macworld.com/wp-content/uploads/2023/01/swift_1200home-1.jpg?quality=50&strip=all”),scale: 3) } }
Error Handling
What if the image we’re trying to retrieve from the web, does not exist, or what if the path we have copied isn’t valid? There must be some way right for dealing with these situations.
Yes, there is surely a way for dealing with these errors, We just have to call the AsyncImage Closure which will return the final image if everything goes okay or else it will return the error to let us know what caused to fail the image loading.
let’s see how we can use closure for error handling
struct ContentView:View{ var body: some View{ AsyncImage(url: URL(string: “https://www.macworld.com/wp-content/uploads/2023/01/swift_1200home-1.jpg?quality=50&strip=all”)){ phase in if let image = phase.image{ image .resizable() .scaledToFit() } else if phase.error != nil{ Text(“Couldn’t load image”) } else{ ProgressView() } } } }
Here in the closure block as you can see there is a phase variable, you can name it whatever you want, but as it changes with the image we call it phase, it’s empty at first then either it gets the image or the error.
If the URL isn’t invalid it returns the image, and the first if let block will be executed, and as you can see we have used modifiers i.e: resizable, scaledToFit here for modifying the image size because the closure runs at the end of the whole process when asyncImage finally converts the retrieved data into an actual image and pass it on to the closures for us to display.
So in the closure, we get the final image and we can use whichever image modifier we like to use on it.
And if the given URL is invalid then the second if else block will run. It will print the error.
And in the meantime, when the phase variable is empty, and asyncImage is retrieving the data from the web it shows us the ProgressView.
‘); } if (paragraph_for_ad.length > 15) { let adparagraph = paragraph_for_ad[10]; adparagraph.insertAdjacentHTML(‘afterEnd’, ”); } if (paragraph_for_ad.length > 30) { let adparagraph = paragraph_for_ad[25]; adparagraph.insertAdjacentHTML(‘afterEnd’, ”); } } else if(window.innerWidth > 1360) { if (paragraph_for_ad.length > 15) { let adparagraph = paragraph_for_ad[10]; // 71161633/article_incontent_1/article_incontent_1 adparagraph.insertAdjacentHTML(‘afterEnd’, ”); } if (paragraph_for_ad.length > 22) { let adparagraph = paragraph_for_ad[18]; // 71161633/article_incontent_2/article_incontent_2 adparagraph.insertAdjacentHTML(‘afterEnd’, ”); } if (paragraph_for_ad.length > 30) { let adparagraph = paragraph_for_ad[29]; // 71161633/article_incontent_1/article_incontent_1 adparagraph.insertAdjacentHTML(‘afterEnd’, ”); } }