GO FURTHER, FASTER: Try the Swift Career Accelerator today! >>

SOLVED: loading images

Forums > SwiftUI
@MrGLWatson  

I'm writing an app that reads a JSON data file. One of the fields in the JSON file is a URL to an image. When I display parts of the JSON file, I would also like to display the image .

Whats the best approach to do this?

3      

@NigelGee  HWS+

What is an example a the URL?

3      

@MrGLWatson  

"https://cf.geekdo-images.com/thumb/img/sD_qvrzIbvfobJj0ZDAaq-TnQPs=/fit-in/200x150/pic2649952.jpg"

3      

Hacking with Swift is sponsored by Alex.

SPONSORED Alex is the iOS & Mac developer’s ultimate AI assistant. It integrates with Xcode, offering a best-in-class Swift coding agent. Generate modern SwiftUI from images. Fast-apply suggestions from Claude 3.5 Sonnet, o3-mini, and DeepSeek R1. Autofix Swift 6 errors and warnings. And so much more. Start your 7-day free trial today!

Try for free!

Sponsor Hacking with Swift and reach the world's largest Swift community!

@NigelGee  HWS+

Make a file with this code from Hacking with Swift plus

import SwiftUI

struct RemoteImage: View {
    private enum LoadState {
        case loading, success, failure
    }

    private class Loader: ObservableObject {
        var data = Data()
        var state = LoadState.loading

        init(url: String) {
            guard let parsedURL = URL(string: url) else {
                fatalError("Invalid URL: \(url)")
            }

            URLSession.shared.dataTask(with: parsedURL) { data, response, error in
                if let data = data, data.count > 0 {
                    self.data = data
                    self.state = .success
                } else {
                    self.state = .failure
                }

                DispatchQueue.main.async {
                    self.objectWillChange.send()
                }
            }.resume()
        }
    }

    @StateObject private var loader: Loader
    var loading: Image
    var failure: Image

    var body: some View {
        selectImage()
            .resizable()
    }

    init(url: String, loading: Image = Image(systemName: "photo"), failure: Image = Image(systemName: "multiply.circle")) {
        _loader = StateObject(wrappedValue: Loader(url: url))
        self.loading = loading
        self.failure = failure
    }

    private func selectImage() -> Image {
        switch loader.state {
        case .loading:
            return loading
        case .failure:
            return failure
        default:
            if let image = UIImage(data: loader.data) {
                return Image(uiImage: image)
            } else {
                return failure
            }
        }
    }
}

then use in your view

struct ContentView: View {
    let jsonURL = "https://cf.geekdo-images.com/thumb/img/sD_qvrzIbvfobJj0ZDAaq-TnQPs=/fit-in/200x150/pic2649952.jpg"

    var body: some View {
        RemoteImage(url: jsonURL)
            .aspectRatio(contentMode: .fit)
            .frame(width: 200)
    }
}

Hope that helps

5      

@MrGLWatson  

thanks Nigel i will give that a try.

3      

@MrGLWatson  

Didn't seem to like @StateObject, but I just replaced that with @ObservedObject and the code seems to work. Thanks aain.

3      

@NigelGee  HWS+

The @StateObject is for Xcode 12

3      

@DavidGagne  

This works, but there's no caching. Has anyone implemented a caching solution they'd like to share? :)

3      

@linkiliz  

Hi, thank you for this, it works good. But do you have a trick to reload if needed ? For now i reload the parents view and it works but is there a better way ?

4      

@andycairnsccl  

This works perfectly when given a URL upon initialization. However, if my URL is part of a @State or @ObservedObject that changes, the image does not update, even when the view is refreshed.

Is there a way to pull in the url every time selectImage is executed?

4      

@amit1072  

This works perfectly for my needs.

Thanks.

3      

@linkiliz  

@andycairnsccl This is what i finally use to have this behavior: i use SDWebImage https://github.com/SDWebImage/SDWebImageSwiftUI It works really good but have the same refresh problem BUT the following trick works : use an image url with this format: http://mywebsite/images/myimage.jpg?time=1606039247 (use current unix timestamp). Then you just have to refresh the url (the timestamp) every time you want to refresh the image, and that´s it !

3      

@a3igner  

Nigels code doesnt work for me. i only see the placeholder picture...

3      

@twhitt14  

@a3igner Were you using SwiftUI previews? As of Xcode 12.4 it seems like networking is disabled in the preview environment so the web image won't load in the preview window. When I run it on the simulator the remote image loads as expected though. It's also possible that the string URL passed in was invalid (I didn't like the fatal error when the URL couldn't be created - I opted to use an actual URL type in the initializers to make things cleaner)

3      

Hacking with Swift is sponsored by Alex.

SPONSORED Alex is the iOS & Mac developer’s ultimate AI assistant. It integrates with Xcode, offering a best-in-class Swift coding agent. Generate modern SwiftUI from images. Fast-apply suggestions from Claude 3.5 Sonnet, o3-mini, and DeepSeek R1. Autofix Swift 6 errors and warnings. And so much more. Start your 7-day free trial today!

Try for free!

Sponsor Hacking with Swift and reach the world's largest Swift community!

Archived topic

This topic has been closed due to inactivity, so you can't reply. Please create a new topic if you need to.

All interactions here are governed by our code of conduct.

Swift breaks down barriers between ideas and apps, and I want to break down barriers to learning it. I’m proud to make hundreds of tutorials that are free to access, and I’ll keep doing that whatever happens. But if that’s a mission that resonates with you, please support it by becoming a HWS+ member. It’ll bring you lots of benefits personally, but it also means you’ll directly help people all over the world to learn Swift by freeing me up to share more of my knowledge, passion, and experience for free! Become Hacking with Swift+ member.
Click here to visit the Hacking with Swift store >>
 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.