SwiftUI技术问询：如何将Firebase Storage中的图片路径存入Realtime Database以实现UI展示

Got it, let's walk through this step by step. You've got the image upload foundation laid, but we need to add a couple key pieces: grabbing the storage image's download URL (or path) and writing it to your Realtime Database, then using that value to show the image in your UI.

First, Fix Your Upload Function & Add Database Logic #

Your current upload code is missing two critical things: a specific filename for your image (you had child("") which is empty) and the logic to fetch the storage URL and save it to the database. Here's the revised version:

import FirebaseStorage
import FirebaseDatabase

func uploadImageToStorage(image: UIImage) {
    guard let imageData = image.jpegData(compressionQuality: 0.8) else { // Use 0.8 for better balance of quality/size
        print("Couldn't convert image to data")
        return
    }
    
    // Specify the exact filename (p4.jpg) in Storage
    let storageRef = Storage.storage().reference().child("p4.jpg")
    
    storageRef.putData(imageData, metadata: nil) { metadata, error in
        if let error = error {
            print("Upload error: \(error.localizedDescription)")
            return
        }
        
        // Fetch the download URL after successful upload
        storageRef.downloadURL { url, error in
            guard let downloadURL = url else {
                print("Failed to get download URL: \(error?.localizedDescription ?? "Unknown error")")
                return
            }
            
            // Write the URL to your Realtime Database's specified field
            // Replace "users/yourUserId/profileImagePath" with your actual database path
            let databaseRef = Database.database().reference().child("users/yourUserId/profileImagePath")
            databaseRef.setValue(downloadURL.absoluteString) { error, ref in
                if let error = error {
                    print("Database write error: \(error.localizedDescription)")
                } else {
                    print("Image uploaded and path saved to database successfully!")
                }
            }
        }
    }
}

Fix Your Button Code (Typo Corrections) #

You had a couple typos in your button action code—here's the corrected version:

// Make sure your image is loaded correctly (fill in the actual image name from your assets)
guard let imageURL = UIImage(named: "yourImageName") else {
    print("Couldn't load image from assets")
    return
}

Button(action: {
    profileViewModel.uploadImageToStorage(image: imageURL) // Fixed function name and typo in "imageURL"
}) {
    Text("Upload Image")
}

Display the Image in Your UI (SwiftUI Example) #

Once the URL is saved to the database, you can fetch it and use AsyncImage to display the image directly from the storage URL:

// In your ViewModel, add a published property to hold the image URL
@Published var profileImageURL: String?

// Fetch the URL from Realtime Database (call this on view init or when needed)
func fetchImageURLFromDatabase() {
    let databaseRef = Database.database().reference().child("users/yourUserId/profileImagePath")
    databaseRef.observeSingleEvent(of: .value) { snapshot in
        if let urlString = snapshot.value as? String {
            self.profileImageURL = urlString
        }
    }
}

// In your View, use AsyncImage to display the image
if let urlString = profileViewModel.profileImageURL, let url = URL(string: urlString) {
    AsyncImage(url: url) { image in
        image.resizable()
            .scaledToFit()
    } placeholder: {
        ProgressView()
    }
} else {
    // Show a placeholder image if URL isn't available yet
    Image(systemName: "person.circle.fill")
        .resizable()
        .scaledToFit()
        .foregroundColor(.gray)
}

Key Notes #

• Replace "users/yourUserId/profileImagePath" with the actual path to your database field where you want to store the image path/URL.
• Using downloadURL is better than just the storage path because it gives you a direct, publicly accessible URL (make sure your Storage rules allow read access for your use case).
• Adjust the compression quality (from 0.1 to 1.0) based on your needs—lower values mean smaller file sizes but slightly reduced image quality.

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