如何顯示圖像blob以反應原生

Question

我嘗試在我的react-native應用程序中顯示圖像。 我已將照片上傳到我的Firebase存儲中，並且它正常運行。 然后我嘗試從Firebase存儲顯示我的圖像，但該文件是blob。 我想將blob轉換為圖像，但我不知道語法。 你可以幫助我解決這個問題。

我應該在哪里放置RNFetch blob？ 我試過放在componentWillMount里面，它顯示錯誤。

uploadImage(uri, mime = 'application/octet-stream') {
        return new Promise((resolve, reject) => {
            const uploadUri = uri
            let uploadBlob = null

            const imageRef = firebase.storage().ref('profileImg').child(`${this.state.user.uid}/Profile Image - ${this.state.user.uid}`)

            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) => {
                console.log(url)
                resolve(url)
            })
            .catch((e) => {
                console.log(e)
                reject(e)
            })
        })
    }

    getProfileImage(){
        let options = {
        title: 'Choose Photo',
        storageOptions: {
        skipBackup: true,
        path: 'images'
      }
    };

    ImagePicker.showImagePicker(options, (response) => {
        console.log('Response = ', response);

          if (response.didCancel) {
            console.log('User cancelled image picker');
          }
          else if (response.error) {
            console.log('ImagePicker Error: ', response.error);
          }
          else if (response.customButton) {
            console.log('User tapped custom button: ', response.customButton);
          }
          else {
            let image_uri = { uri: 'data:image/jpeg;base64,' + response.data };
            this.uploadImage(response.uri)
            .then((url) => { 
                console.log('uploaded')
                this.setState({
                    image_uri: url,
                });
            })
            .catch((error) => console.log(error))
            firebase.auth().currentUser.updateProfile({
                photoURL: this.state.image_uri
            });
          }
      })
    }

Answer 1

我遇到了同樣的問題，我實現的解決方法是將文件類型放在State中

在構造函數中

constructor() {
    super();
    // we will change it to fill the image file type from response
    this.state = {
        fileType: ""
    };
}

在getImage（）函數中我們應該改變狀態以放置文件類型

getImage() {
    ImagePicker.showImagePicker(options, response => {
        console.log("Response = ", response);
        this.setState({
            fileType: response.type
        });
......... the rest of the code

在uploadImage（）中，您應該將mime設置為此處實現的fileType狀態

 uploadImage(uri, mime = this.state.fileType) {
    return new Promise((resolve, reject) => {
        const uploadUri =
            Platform.OS === "ios" ? uri.replace("file://", "") : uri;
        let uploadBlob = null;

        const imageRef = firebase
            .storage()
            .ref("images/")
            .child(Date.now());

        fs.readFile(uploadUri, "base64")
            .then(data => {
                return Blob.build(data, { type: `${mime};BASE64` });
            })
            .then(blob => {
                uploadBlob = blob;
                var metadata = {
                    contentType: mime
                };

                return imageRef.put(uri, metadata);
            })
            .then(() => {
                uploadBlob.close();
                return imageRef.getDownloadURL();
            })
            .then(url => {
                resolve(url);
            })
            .catch(error => {
                reject(error);
            });
    });
}

這是我的第一個答案BTW

Answer 2

這適用於我的情況：

userPhoto是一個blob字符串。

  <img className="pic__photo" src={"data:image/png;base64," + userPhoto} />

Answer 3

現在，您要做的是將base64轉換為blob並將blob從成功查詢中獲取並轉換為base64以再次顯示它，從而將圖像上傳到firebase 。

由於您已經在使用承諾，因此您可以檢查圖像是否已成功上傳 ，然后顯示相同的base64否則顯示original data 。

// Default Image data
let image_uri = { uri: 'data:image/jpeg;base64,' + response.data };

this.uploadImage(response.uri)
            .then((url) => { 
                // Success, replace with base64 you've got
                console.log('uploaded')
                this.setState({
                    image_uri
                });
            })
            .catch(error => {
               this.setState({
                    image_uri: // SOME DEFAULT IMAGE VALUE
                });
            })