SwiftUI中使用AsyncImage展示SVG图片失败的解决方法求助

AsyncImage 本身不支持解析 SVG 矢量图，它只能处理 PNG、JPG 这类位图格式，所以直接传入 SVG URL 会加载失败，只显示占位符。下面是几个可行的解决办法：

办法一：用第三方 SVG 解析库配合异步加载 #

可以使用像 SwiftSVG 或 SVGKit 这类库来解析 SVG 数据，结合 SwiftUI 的异步任务来加载并转换图片：

1. 先通过 CocoaPods 或 Swift Package Manager 引入第三方库（比如 SwiftSVG）
2. 自定义一个 View 来处理 SVG 的加载和解析：

import SwiftUI
import SwiftSVG

struct SVGAsyncImageView: View {
    let url: URL
    @State private var renderedImage: UIImage?
    
    var body: some View {
        Group {
            if let image = renderedImage {
                Image(uiImage: image)
                    .resizable()
                    .scaledToFit()
            } else {
                // 自定义占位符
                Rectangle()
                    .fill(.gray.opacity(0.2))
                    .overlay(ProgressView())
            }
        }
        .task {
            do {
                let (data, _) = try await URLSession.shared.data(from: url)
                // 解析SVG数据并转换为UIImage
                let svgLayer = SVGLayer(data: data)
                svgLayer.resizeToFit(CGSize(width: 200, height: 200)) // 设置目标尺寸
                let image = svgLayer.uiImage
                renderedImage = image
            } catch {
                print("SVG加载失败：\(error.localizedDescription)")
            }
        }
    }
}

// 使用示例
SVGAsyncImageView(url: URL(string: "https://s3-symbol-logo.tradingview.com/applovin--big.svg")!)

办法二：手动下载并转换 SVG（无第三方库） #

如果不想依赖第三方库，可以手动将 SVG 转换为位图。核心思路是用 WKWebView 加载 SVG 内容，再将网页内容截图为图片：

struct SVGWebImageView: View {
    let url: URL
    @State private var webImage: UIImage?
    
    var body: some View {
        Group {
            if let image = webImage {
                Image(uiImage: image)
                    .resizable()
                    .scaledToFit()
            } else {
                ProgressView()
            }
        }
        .task {
            let image = await loadSVGAsImage(from: url, size: CGSize(width: 300, height: 300))
            webImage = image
        }
    }
    
    private func loadSVGAsImage(from url: URL, size: CGSize) async -> UIImage? {
        return await withCheckedContinuation { continuation in
            let webView = WKWebView(frame: CGRect(origin: .zero, size: size))
            webView.load(URLRequest(url: url))
            webView.navigationDelegate = NavigationDelegate { image in
                continuation.resume(returning: image)
            }
        }
    }
    
    class NavigationDelegate: NSObject, WKNavigationDelegate {
        private let completion: (UIImage?) -> Void
        
        init(completion: @escaping (UIImage?) -> Void) {
            self.completion = completion
            super.init()
        }
        
        func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
            webView.takeSnapshot(with: nil) { image, error in
                self.completion(image)
            }
        }
    }
}

办法三：请求服务器返回位图格式（如果支持） #

如果你的图片服务器支持格式转换，可以尝试修改 URL，请求 PNG/JPG 格式的图片。比如有些服务会支持类似 ?format=png 这样的参数，但这个取决于服务器的配置，不一定通用。

内容的提问来源于stack exchange，提问作者dev_nil