将 svg 图片上传到 SwiftUI

Answer 1

编辑： 我找到了解决方案并发布了另一个答案，请在此论坛中查看

对此没有解决方案，因为 .SVG 图像实际上不是图像， 它们实际上是文件（SVG：可缩放矢量图形），它们基于计算而不是实际像素。

您最好的选择是告诉您的后端将所有 .SVG 文件转换为 .PNG 或 .JPG 文件，然后为您提供该格式的图像 url。

或者另一个有效的选择是将图像下载到您的项目资产中，然后为其提供 URL 的名称，并且每当您获得 url 时，您只需像这样使用它：

Image("https://s3-symbol-logo.tradingview.com/applovin--big.svg")

我一直在尝试做和你一样的事情，但我只找到了一个解决方案：在 webView 中呈现 .SVG 图像。如果你有兴趣，你可以在这里找到它 (Presenting .SVG as a web View) 但请记住它不是最佳的

Answer 2

看起来是你的图片链接问题。

我测试了两个AsyncImage，我的链接有效，但您的链接无效。

尝试检查您的链接是否是图像加载的正确路径。

代码在图片下方：

 VStack {
        //my link worked
        AsyncImage(url: URL(string: "https://picsum.photos/200")) { image in
            image.resizable()
        } placeholder: {
            ProgressView()
        }
        .frame(width: 100, height: 100)
        
        //your link did not work. result in loading.
        AsyncImage(url: URL(string: "https://s3-symbol-logo.tradingview.com/applovin--big.svg")) { image in
            image.resizable()
        } placeholder: {
            ProgressView()
        }
        .frame(width: 100, height: 100)
    }

Answer 3

有两种方法可以在您的项目中实现 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()
    }
}