簡體   English   中英

如何使用 Firebase 存儲 url 作為 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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM