📸 Loading Images from the Internet with AsyncImage

Sometimes in an app, we need to show pictures from the internet — like user profile photos or news thumbnails.

Before, this used to be tricky. But now in SwiftUI (from iOS 15), Apple gave us a very handy tool called AsyncImage.
It makes life a lot easier. ✨

🖼 The Simple Way

Just give it a URL. That’s it.

AsyncImage(url: URL(string: "https://example.com/photo.jpg"))

SwiftUI will download the image and show it.
No extra code. No stress. 😌

⏳ Show Something While It Loads

It’s nice to show something while the image is loading — like a spinner.
We can use placeholder for that.

AsyncImage(url: URL(string: imageUrl)) { image in
   image.resizable()
} placeholder: {
   ProgressView()
}

This will show a little spinning loader until the image is ready.

⚡ Handle Success and Error

Sometimes the image might fail to load (maybe internet is off).
We can handle this using phase.

AsyncImage(url: URL(string: imageUrl)) { phase in
   switch phase {
   case .empty:
       Text("Loading...")
   case .failure:
       Text("Oops! Something went wrong.")
   case .success(let image):
       image.resizable()
           .scaledToFit()
           .frame(width: 200, height: 150)
   @unknown default:
       EmptyView()
   }
}

This way, we can show:

• Loading text while it’s loading
• Error text if it fails
• The real image when it works ✅

✨ Add a Smooth Animation

Right now, the image just pops in suddenly.
Let’s make it fade in slowly — much nicer to look at. 🌸

AsyncImage(url: URL(string: imageUrl)) { phase in
   switch phase {
   case .empty:
       ProgressView()
   case .failure:
       Text("Error loading image")
   case .success(let image):
       image
           .resizable()
           .scaledToFit()
           .frame(width: 200, height: 150)
           .opacity(0)
           .animation(.easeIn(duration: 0.5), value: UUID())
           .transition(.opacity)
   @unknown default:
       EmptyView()
   }
}

 Or we can make it fade and zoom in at the same time:

image
   .resizable()
   .scaledToFit()
   .frame(width: 200, height: 150)
   .scaleEffect(0.8)
   .opacity(0)
   .animation(.spring(response: 0.6, dampingFraction: 0.7), value: UUID())
 

It looks soft and friendly. 💛

💭 Little Notes

• Always use .resizable() if you want to change the image size.
• AsyncImage has basic caching, so images won’t download again and again.
• Always handle errors, just in case.

🌟 Wrap Up

AsyncImage makes loading internet pictures super simple.
With a little animation, it feels smooth and professional too.

Apple Doc : https://developer.apple.com/documentation/swiftui/asyncimagephase