将svg图像上传到SwiftUI
将svg图像上传到SwiftUI
提问于 2022-07-24 17:33:53
我向服务器发出请求，作为响应，我得到了一个svg映像。我试图使用AsyncImage()来显示它，但是它没有工作。这个问题有什么解决办法吗？
所以我试着做：
AsyncImage(url: URL(string: "https://s3-symbol-logo.tradingview.com/applovin--big.svg"))但这导致了这样一个事实，即只显示占位符：
回答 3
Stack Overflow用户
回答已采纳
发布于 2022-08-18 10:51:16
在您的项目中有两种实现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()
}
}Stack Overflow用户
发布于 2022-08-04 11:49:42
编辑:我找到了一个解决方案，并发布了另一个答案，请在这个论坛上查看。
这是没有解决方案的，因为.SVG图像实际上不是图像，它们实际上是文件(SVG：)，它们是基于计算而不是实际像素的。
最好的选择是告诉后端将所有.SVG文件转换为.PNG或.JPG文件，然后以这种格式给出图像urls。
或者另一个有效的选项是将映像下载到您的项目资产中，然后将其命名为URL，每当您获得url时，您只需按如下方式使用它：
Image("https://s3-symbol-logo.tradingview.com/applovin--big.svg")我一直试图做与您相同的事情，但我只找到了一个解决方案:将.SVG映像显示在webView中。如果你是无畏的，你可以在这里找到它(将.SVG表示为web视图)，但请记住，它不是最佳的
Stack Overflow用户
发布于 2022-07-24 17:59:17
看来是你的图像链接问题。
我测试了两个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)
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73100626
复制相关文章
相似问题
腾讯云开发者
