Update the WebImage API to match SwiftUI.AsyncImage

.github/workflows/CI.yml

@@ -46,7 +46,7 @@ jobs:
       matrix:
         iosDestination: ["name=iPhone 13 Pro"]
         tvOSDestination: ["name=Apple TV"]
-        watchOSDestination: ["platform=watchOS Simulator,name=Apple Watch Series 7 - 45mm"]
+        watchOSDestination: ["platform=watchOS Simulator,name=Apple Watch Series 7 (45mm)"]
         macOSDestination: ["platform=macOS"]
         macCatalystDestination: ["platform=macOS,arch=x86_64,variant=Mac Catalyst"]
     steps:

Example/SDWebImageSwiftUI.xcodeproj/xcshareddata/xcschemes/SDWebImageSwiftUIDemo-watchOS WatchKit App.xcscheme

@@ -53,7 +53,8 @@
       ignoresPersistentStateOnLaunch = "NO"
       debugDocumentVersioning = "YES"
       debugServiceExtension = "internal"
-      allowLocationSimulation = "YES">
+      allowLocationSimulation = "YES"
+      notificationPayloadFile = "PushNotificationPayload.apns">
       <BuildableProductRunnable
          runnableDebuggingMode = "0">
          <BuildableReference

Example/SDWebImageSwiftUIDemo/ContentView.swift

@@ -96,36 +96,28 @@ struct ContentView: View {
                 HStack {
                     if self.animated {
                         #if os(macOS) || os(iOS) || os(tvOS) || os(visionOS)
-                        AnimatedImage(url: URL(string:url), isAnimating: .constant(true))
+                        AnimatedImage(url: URL(string:url))
                         .onViewUpdate { view, context in
                         #if os(macOS)
                             view.toolTip = url
                         #endif
                         }
-                        .indicator(SDWebImageActivityIndicator.medium)
-                        /**
-                        .placeholder(UIImage(systemName: "photo"))
-                        */
+                        .indicator(.activity)
                         .transition(.fade)
                         .resizable()
                         .scaledToFit()
                         .frame(width: CGFloat(100), height: CGFloat(100), alignment: .center)
                         #else
-                        WebImage(url: URL(string:url), isAnimating: self.$animated)
+                        WebImage(url: URL(string:url))
                         .resizable()
                         .indicator(.activity)
                         .transition(.fade(duration: 0.5))
                         .scaledToFit()
                         .frame(width: CGFloat(100), height: CGFloat(100), alignment: .center)
                         #endif
                     } else {
-                        WebImage(url: URL(string:url), isAnimating: .constant(true))
+                        WebImage(url: URL(string:url))
                         .resizable()
-                        /**
-                         .placeholder {
-                             Image(systemName: "photo")
-                         }
-                         */
                         .indicator(.activity)
                         .transition(.fade(duration: 0.5))
                         .scaledToFit()
@@ -199,15 +191,16 @@ struct ContentView: View {
         }
         #endif
         #if os(watchOS)
-        return contentView()
-            .contextMenu {
-                Button(action: { self.reloadCache() }) {
-                    Text("Reload")
-                }
-                Button(action: { self.switchView() }) {
-                    Text("Switch")
+        return NavigationView {
+            contentView()
+                .navigationTitle("WebImage")
+                .toolbar {
+                    Button(action: { self.reloadCache() }) {
+                        Text("Reload")
+                    }
                 }
-            }
+
+        }
         #endif
     }
 

Example/SDWebImageSwiftUIDemo/DetailView.swift

@@ -52,10 +52,8 @@ struct DetailView: View {
             #endif
             #if os(macOS) || os(watchOS)
             zoomView()
-            .contextMenu {
-                Button(isAnimating ? "Stop" : "Start") {
-                    self.isAnimating.toggle()
-                }
+            .onTapGesture {
+                self.isAnimating.toggle()
             }
             #endif
         }
@@ -95,24 +93,31 @@ struct DetailView: View {
         HStack {
             if animated {
                 #if os(macOS) || os(iOS) || os(tvOS) || os(visionOS)
-                AnimatedImage(url: URL(string:url), options: [.progressiveLoad, .delayPlaceholder], isAnimating: $isAnimating)
+                AnimatedImage(url: URL(string:url), options: [.progressiveLoad, .delayPlaceholder], isAnimating: $isAnimating, placeholderImage: .wifiExclamationmark)
+                .indicator(.progress)
                 .resizable()
-                .placeholder(.wifiExclamationmark)
-                .indicator(SDWebImageProgressIndicator.default)
                 .scaledToFit()
                 #else
-                WebImage(url: URL(string:url), options: [.progressiveLoad, .delayPlaceholder], isAnimating: $isAnimating)
-                .resizable()
-                .placeholder(.wifiExclamationmark)
+                WebImage(url: URL(string:url), options: [.progressiveLoad, .delayPlaceholder], isAnimating: $isAnimating) { image in
+                    image.resizable()
+                        .scaledToFit()
+                } placeholder: {
+                    Image.wifiExclamationmark
+                        .resizable()
+                        .scaledToFit()
+                }
                 .indicator(.progress)
-                .scaledToFit()
                 #endif
             } else {
-                WebImage(url: URL(string:url), options: [.progressiveLoad, .delayPlaceholder], isAnimating: $isAnimating)
-                .resizable()
-                .placeholder(.wifiExclamationmark)
+                WebImage(url: URL(string:url), options: [.progressiveLoad, .delayPlaceholder], isAnimating: $isAnimating) { image in
+                    image.resizable()
+                        .scaledToFit()
+                } placeholder: {
+                    Image.wifiExclamationmark
+                        .resizable()
+                        .scaledToFit()
+                }
                 .indicator(.progress(style: .circular))
-                .scaledToFit()
             }
         }
     }

README.md

@@ -128,18 +128,16 @@ github "SDWebImage/SDWebImageSwiftUI"
 
 ```swift
 var body: some View {
-    WebImage(url: URL(string: "https://nokiatech.github.io/heif/content/images/ski_jump_1440x960.heic"))
+    WebImage(url: URL(string: "https://nokiatech.github.io/heif/content/images/ski_jump_1440x960.heic")) { image in
+        image.resizable() // Control layout like SwiftUI.AsyncImage, you must use this modifier or the view will use the image bitmap size
+    } placeholder: {
+            Rectangle().foregroundColor(.gray)
+    }
     // Supports options and context, like `.delayPlaceholder` to show placeholder only when error
     .onSuccess { image, data, cacheType in
         // Success
         // Note: Data exist only when queried from disk cache or network. Use `.queryMemoryData` if you really need data
     }
-    .resizable() // Resizable like SwiftUI.Image, you must use this modifier or the view will use the image bitmap size
-    .placeholder(Image(systemName: "photo")) // Placeholder Image
-    // Supports ViewBuilder as well
-    .placeholder {
-        Rectangle().foregroundColor(.gray)
-    }
     .indicator(.activity) // Activity Indicator
     .transition(.fade(duration: 0.5)) // Fade Transition with duration
     .scaledToFit()
@@ -194,21 +192,21 @@ WebImage(url: url)
 ```swift
 var body: some View {
     Group {
-        AnimatedImage(url: URL(string: "https://raw.githubusercontent.com/liyong03/YLGIFImage/master/YLGIFImageDemo/YLGIFImageDemo/joy.gif"))
+        AnimatedImage(url: URL(string: "https://raw.githubusercontent.com/liyong03/YLGIFImage/master/YLGIFImageDemo/YLGIFImageDemo/joy.gif"), placeholderImage: .init(systemName: "photo")) // Placeholder Image
         // Supports options and context, like `.progressiveLoad` for progressive animation loading
         .onFailure { error in
             // Error
         }
         .resizable() // Resizable like SwiftUI.Image, you must use this modifier or the view will use the image bitmap size
-        .placeholder(UIImage(systemName: "photo")) // Placeholder Image
-        // Supports ViewBuilder as well
-        .placeholder {
-            Circle().foregroundColor(.gray)
-        }
-        .indicator(SDWebImageActivityIndicator.medium) // Activity Indicator
+        .indicator(.activity) // Activity Indicator
         .transition(.fade) // Fade Transition
         .scaledToFit() // Attention to call it on AnimatedImage, but not `some View` after View Modifier (Swift Protocol Extension method is static dispatched)
 
+        // Supports SwiftUI ViewBuilder placeholder as well
+        AnimatedImage(url: url) {
+            Circle().foregroundColor(.gray)
+        }
+
         // Data
         AnimatedImage(data: try! Data(contentsOf: URL(fileURLWithPath: "/tmp/foo.webp")))
         .customLoopCount(1) // Custom loop count
@@ -624,8 +622,8 @@ Since SwiftUI is aimed to support all Apple platforms, our demo does this as wel
 
 Demo Tips:
 
-1. Use `Switch` (right-click on macOS/force press on watchOS) to switch between `WebImage` and `AnimatedImage`.
-2. Use `Reload` (right-click on macOS/force press on watchOS) to clear cache.
+1. Use `Switch` (right-click on macOS/tap on watchOS) to switch between `WebImage` and `AnimatedImage`.
+2. Use `Reload` (right-click on macOS/button on watchOS) to clear cache.
 3. Use `Swipe Left` (menu button on tvOS) to delete one image url from list.
 4. Pinch gesture (Digital Crown on watchOS, play button on tvOS) to zoom-in detail page image.
 5. Clear cache and go to detail page to see progressive loading.