将 svg 图像上传到 SwiftUI

Question

我向服务器发出请求，作为响应，我得到了一个 svg 图像。我尝试使用 AsyncImage() 显示它，但它不起作用。这个问题有什么解决办法吗？

所以我尝试这样做：

AsyncImage(url: URL(string: "https://s3-symbol-logo.tradingview.com/applovin--big.svg"))

但这导致只显示占位符：

Answer 1

有两种方法可以在项目中实现 SVG 图像，一种是使用 GitHub 上名为SVGKit 的库（这种方法使用 ram 的成本很高，并且会稍微减慢加载时间），但另一种完美的方法是使用：

两个库：1- SDWebImageSVGCoder 2- SDWebImageSwiftUI

通过 Xcode 包依赖项将这些库添加到项目后，您可以编写此代码来设置并使用它。

import SwiftUI
import SDWebImageSVGCoder

@main
struct Package_trialsApp: App {


        init() {
            setUpDependencies() // Initialize SVGCoder
        }
        var body: some Scene {
            WindowGroup {
                ContentView()
            }
        }
}

// Initialize SVGCoder
private extension Package_trialsApp {
    
    func setUpDependencies() {
        SDImageCodersManager.shared.addCoder(SDImageSVGCoder.shared)
    }
}

设置完成后，您可以像这样使用它：

import SDWebImageSwiftUI

WebImage(url: "https://www.svgrepo.com/show/423378/car-service.svg", options: [], context: [.imageThumbnailPixelSize : CGSize.zero])
                                .placeholder {ProgressView()}
                                .resizable()
                                .frame(width: 300, height: 300)

奖励：您还可以执行类似的操作来使您的代码更高效且更可重用：

import SwiftUI

import SDWebImageSwiftUI


struct ContentView: View {
    
    let imageArray = [
        URL(string: "https://www.svgrepo.com/show/423378/car-service.svg"),
        URL(string: "https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg"),
        URL(string: "https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg"),
        URL(string: "https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg"),
        URL(string: "https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg"),
        URL(string: "https://dev.w3.org/SVG/tools/svgweb/samples/svgfiles/androi.svg"),
        URL(string: "https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg"),
        URL(string: "https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg"),
        URL(string: "https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg"),
        URL(string: "https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg"),
        URL(string: "https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg"),
        URL(string: "https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg"),
        URL(string: "https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg"),
        URL(string: "https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg"),
        URL(string: "https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg"),
        URL(string: "https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg"),
        URL(string: "https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg"),
        URL(string: "https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg"),
        URL(string: "https://jpeg.org/images/jpeg-home.jpg")
    ]
    var body: some View {
        ScrollView {
            
            Link(destination: URL(string: "https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg")!, label: {
                Text("Sample SVG image")
                    .foregroundColor(.orange)
            })
            
            ForEach(imageArray, id: \.self) { url in
                if let bolean = url?.absoluteString.suffix(3).localizedCaseInsensitiveContains("svg") {
                    if bolean {
                        HStack {
                            WebImage(url: url, options: [], context: [.imageThumbnailPixelSize : CGSize.zero])
                                .placeholder {ProgressView()}
                                .resizable()
                                .frame(width: 300, height: 300)
                        }
                    } else {
                        AsyncImage(url: url, content: { phase in
                            switch phase {
                            case .empty:
                                ProgressView()
                            case .failure:
                                Color.red
                            case .success(let image):
                                image.resizable().frame(width: 100, height: 100)
                                
                                
                            @unknown default:
                                fatalError()
                            }
                            
                        })
                    }
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}