How to display the image from URL string in SwiftUI supporting iOS 13+

ODENZA
2 min readJun 22, 2023

If you want to display the images in your app in iOS 15+, It’s pretty easy to use AsyncImage . read more: Apple document

AsyncImage(url: URL(string: "https://image_url_address"))

But, how to display the image in iOS 13 or 14? and we are going to talk about this issue in this article.

To display the image from url or url string and handle the image cache in iOS13+, I’m going to use ObservableObject .

Step 1: Create ImageViewModel: ObservableObject

First, You need to create `ImageViewModel: ObservableObject` to fetch an image from url string and handle the image cache.

class ImageViewModel: ObservableObject {
@Published var image: UIImage?

private var imageCache: NSCache<NSString, UIImage>?

init(urlString: String?) {
loadImage(urlString: urlString)
}

private func loadImage(urlString: String?) {
guard let urlString = urlString else { return }

if let imageFromCache = getImageFromCache(from: urlString) {
self.image = imageFromCache
return
}

loadImageFromURL(urlString: urlString)
}

private func loadImageFromURL(urlString: String) {
guard let url = URL(string: urlString) else { return }

URLSession.shared.dataTask(with: url) { data, response, error in
guard error == nil else {
print(error ?? "unknown error")
return
}

guard let data = data else {
print("No data found")
return
}

DispatchQueue.main.async { [weak self] in
guard let loadedImage = UIImage(data: data) else { return }
self?.image = loadedImage
self?.setImageCache(image: loadedImage, key: urlString)
}
}.resume()
}

private func setImageCache(image: UIImage, key: String) {
imageCache?.setObject(image, forKey: key as NSString)
}

private func getImageFromCache(from key: String) -> UIImage? {
return imageCache?.object(forKey: key as NSString) as? UIImage
}
}

After the image is loaded, The image cache should be stored.

Step 2: Create ImageView

In this View, We have to provide the image view to display the image.

struct ImageView: View {
@ObservedObject private var imageViewModel: ImageViewModel

init(urlString: String?) {
imageViewModel = ImageViewModel(urlString: urlString)
}

var body: some View {
Image(uiImage: imageViewModel.image ?? UIImage())
.resizable()
}
}

struct ImageView_Previews: PreviewProvider {
static var previews: some View {
ImageView(urlString: "https://developer.apple.com/news/images/og/swiftui-og.png")
}
}

Now, We can use this will to display the image from url in any contentView.

Step 3: Display the image from UrlString

struct ContentView: View {
private let urlString = "https://developer.apple.com/news/images/og/swiftui-og.png"

var body: some View {
VStack {
ImageView(urlString: urlString)
.frame(width: 678, height: 355)

Text("Display image from URL supporting iOS 13+")
}
.padding()
}
}

Result:

Source code: https://github.com/odencodes/SwiftUI_display_image_from_url

--

--