![](/img/trans.png)
[英]How to display Image from Firebase storage in React-native?
[英]How to use Firebase Storage url as react-native Image's source
我試圖查看存儲在 Firebase 存儲中的圖像,但是當我在<Image />
的源道具中使用下載 url 時,我收到警告:
警告:道具類型失敗:提供給
Image
的道具source
無效。
上傳 function:
const Blob = RNFetchBlob.polyfill.Blob;
const fs = RNFetchBlob.fs;
window.XMLHttpRequest = RNFetchBlob.polyfill.XMLHttpRequest;
window.Blob = Blob;
uploadImage = async (uri, mime = "application/octet-stream") => {
if (this.state.uploadable == "") {
alert("No image selected");
} else {
const uploadUri =
Platform.OS === "ios" ? uri.replace("file://", "") : uri;
const sessionId = new Date().getTime();
let uploadBlob = null;
const imageRef = firebase
.storage()
.ref("userSpecificFolder")
.child("profileImage");
fs.readFile(uploadUri, "base64")
.then(data => {
return Blob.build(data, { type: `${mime};BASE64` });
})
.then(blob => {
uploadBlob = blob;
return imageRef.put(blob, { contentType: mime });
})
.then(() => {
uploadBlob.close();
return imageRef.getDownloadURL();
})
.then(url => {
this.setState({ storedImg: url });
resolve(url);
})
.catch(err => {
reject(err);
});
}
};
下載 function:
downloadImg = () => {
firebase
.storage()
.ref("userSpecificFolder/profileImage")
.getDownloadURL()
.then(url => {
this.setState({ storedImg: url });
});
};
執行:
<View>
<Image source={this.state.storedImg}/>
</View>
如果這不是從 Firebase 存儲查看圖像的方法,那么缺少哪些步驟?
ps,我嘗試了此處發布的答案,結果與上述相同。
問題在於實施。 由於某種原因,url 需要是 object 中 uri 屬性的值。 <Image source={{uri: *url* }} />
並顯示圖像。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.