如何从 Firebase 存储上传我的 React 应用程序上的图像？

Question

我正在尝试制作一个社交媒体应用程序。我想添加一个上传图片的功能，但我不知道如何在我的 firebase 存储中获取这些图片并将它们全部显示为我的应用上的帖子。

这是我的 firebase.js 文件

    import firebase from "firebase/app";
    import "firebase/storage";

const firebaseConfig = {
    apiKey: "AIzaSyCbiHH-zpob5AytooHMxrB_oncIz5wAcgg",
    authDomain: "expresate-react.firebaseapp.com",
    databaseURL: "https://expresate-react-default-rtdb.firebaseio.com",
    projectId: "expresate-react",
    storageBucket: "expresate-react.appspot.com",
    messagingSenderId: "400618187775",
    appId: "1:400618187775:web:d78270044e4b1d464215ca"
  };
firebase.initializeApp(firebaseConfig);

const storage = firebase.storage();

export { storage, firebase as default };

这是将图像上传到 Firebase 存储的功能。

const image = this.state.selectedFile;

    const uploadTask = storage.ref(`images/${image.name}`).put(image);
    uploadTask.on(
        "state_changed",
        snapshot => {},
        error => {
            console.log(error);
        },
        () => {
            storage
            .ref("images")
            .child(image.name)
            .getDownloadURL()
            .then(url => {
              this.setState({url: url, selectedFile: null});
            });
        }
    );

上传功能运行良好，我可以看到 Firebase 存储中的文件。现在，我如何获取它们并将它们显示在我的应用程序上？

谢谢

Answer 1

您已经通过getDownloadURL 获得了url。 它是一个类似this 的网址。

您可以使用它来显示您的图像。只需将该网址放入img 中，如下所示：

<img src={url} />