SwiftUI中图片加载失败时替换为缩略图的问题排查

问题描述 #

从Firebase Storage获取图片时，期望存储中无对应图片时显示指定的shoePlaceHolder缩略图，但实际遇到错误时无法正常触发占位图显示，仅打印错误信息。

现有代码片段 #

报错处理代码 #

if let error = error {
    Swift.print(error)
}

缩略图代码 #

Image("shoePlaceHolder")
.resizable()
.aspectRatio(contentMode: .fit)

完整实现代码 #

func getFullImageURL() {
    let storage = Storage.storage()
    let storagePath = "gs://on-switch.appspot.com/main/\(season)/"
    let storageRef = storage.reference(forURL: storagePath)        
    let formattedImageURL = imageURL.absoluteString.replacingOccurrences(of: "file:///", with: "")
    let ref = storageRef.child(formattedImageURL)
    ref.downloadURL { url, error in
        DispatchQueue.main.async {
            if let error = error {
                Swift.print(error)
            } else if let url = url {
                fullImageURL = url
            } else {
                Swift.print("No url and no error")
            }
        }
    }
}

@ViewBuilder
var content: some View {
    VStack {
        VStack {
            headerView()
            HStack {
                AsyncImage(url: $fullImageURL.wrappedValue) { image in
                    image
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                } placeholder: {
                    Image("shoePlaceHolder")
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                }.frame(width: 260, height: 180)
                    .onAppear(perform: getFullImageURL)
                VStack(alignment: .leading) {
                    titleView()
                    subtitleView()
                }
                Spacer()
            }
        }
        .padding()
        OnDivider()
            .padding(.horizontal)
        SectionView(leadingView: {
            Text("\(variants.count) variants")
                .secondaryText()
        }, trailingView: {
            Image(systemName: "rectangle.expand.vertical")
                .foregroundColor(Color(.secondaryLabel))
        }).padding()
    }
}

问题原因 #

AsyncImage的placeholder仅在图片加载过程中显示，当Firebase返回错误（比如文件不存在）时，AsyncImage不会自动切换到占位图——因为此时fullImageURL可能仍为nil，或错误回调仅打印信息而未触发占位图显示逻辑。

解决方案 #

步骤1：新增加载失败状态变量 #

添加一个状态变量标记图片加载是否失败：

@State private var isImageLoadFailed = false

步骤2：修改错误回调逻辑 #

在getFullImageURL的错误分支中设置加载失败状态，成功加载时重置状态：

func getFullImageURL() {
    let storage = Storage.storage()
    let storagePath = "gs://on-switch.appspot.com/main/\(season)/"
    let storageRef = storage.reference(forURL: storagePath)        
    let formattedImageURL = imageURL.absoluteString.replacingOccurrences(of: "file:///", with: "")
    let ref = storageRef.child(formattedImageURL)
    ref.downloadURL { url, error in
        DispatchQueue.main.async {
            if let error = error {
                Swift.print(error)
                self.isImageLoadFailed = true // 标记加载失败
            } else if let url = url {
                self.fullImageURL = url
                self.isImageLoadFailed = false // 加载成功重置状态
            } else {
                Swift.print("No url and no error")
                self.isImageLoadFailed = true
            }
        }
    }
}

步骤3：根据状态控制视图显示 #

修改content中的图片显示逻辑，根据isImageLoadFailed和fullImageURL的状态切换显示内容：

@ViewBuilder
var content: some View {
    VStack {
        VStack {
            headerView()
            HStack {
                Group {
                    // 加载失败时显示占位图
                    if isImageLoadFailed {
                        Image("shoePlaceHolder")
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                    } 
                    // 有有效URL时加载图片，加载过程显示占位图
                    else if let url = fullImageURL {
                        AsyncImage(url: url) { image in
                            image
                                .resizable()
                                .aspectRatio(contentMode: .fit)
                        } placeholder: {
                            Image("shoePlaceHolder")
                                .resizable()
                                .aspectRatio(contentMode: .fit)
                        }
                    } 
                    // 初始状态显示占位图
                    else {
                        Image("shoePlaceHolder")
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                    }
                }
                .frame(width: 260, height: 180)
                .onAppear(perform: getFullImageURL)
                
                VStack(alignment: .leading) {
                    titleView()
                    subtitleView()
                }
                Spacer()
            }
        }
        .padding()
        OnDivider()
            .padding(.horizontal)
        SectionView(leadingView: {
            Text("\(variants.count) variants")
                .secondaryText()
        }, trailingView: {
            Image(systemName: "rectangle.expand.vertical")
                .foregroundColor(Color(.secondaryLabel))
        }).padding()
    }
}

通过以上修改，无论是初始加载、加载中还是加载失败的场景，都能正确显示占位图，满足Firebase无对应图片时显示缩略图的需求。

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