如何从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存储中的文件。如何获取它们并显示在app上呢?

谢谢

Answer 1

你已经用getDownloadURL得到了url。它是一个像这样的url。

你可以用它来显示你的图像。把url放到img中，像这样:

<img src={url} />