React-native - Füllen Sie das Bild mit Blob, das in eine URL konvertiert wurde

Question

Ich möchte ein Bild mit einem uri füllen.
Ich fordere das Bild vom Server und es gibt ein BLOB zurück.

BLOB, wenn auf der Konsole angezeigt:

ich dann das BLOB in eine URL mit der folgenden Zeile konvertieren:

var blobUrl = URL.createObjectURL(blob); 

blobUrl bei der Anzeige zu trösten

ich dann versuchen, Füllen Sie das Bild mit der URL:

<Image source={{uri: blobURL}} style={{width: 100, height: 50}} /> 

Das Bild wird nicht angezeigt. Was soll ich machen?

Ich benutze den Android-Emulator, der mit dem localhost verbunden ist. Könnte möglicherweise etwas damit zu tun haben, da die BLOB-URL im localhost gespeichert wird?

Oder könnte es ein einfacher Syntaxfehler sein?

Danke.

Answer 1

Lösung

React-Mutter unterstützt keine Kleckse [ref: Git/React-Native] . Um das zu erreichen, musste ich react-native-fetch-blob herunterladen, was eine Base64-Zeichenfolge zurückgibt.

Funktion, die Base64-String zurückgibt:

var RNFetchBlob = require('react-native-fetch-blob').default; 

getImageAttachment: function(uri_attachment, mimetype_attachment) { 

    return new Promise((RESOLVE, REJECT) => { 

    // Fetch attachment 
    RNFetchBlob.fetch('GET', config.apiRoot+'/app/'+uri_attachment) 
     .then((response) => { 

     let base64Str = response.data; 
     var imageBase64 = 'data:'+mimetype_attachment+';base64,'+base64Str; 
     // Return base64 image 
     RESOLVE(imageBase64) 
    }) 

    }).catch((error) => { 
    // error handling 
    console.log("Error: ", error) 
}); 
}, 

Populate Bild mit base64
ich dann das Bild füllen Withe der zurück base64Image mit:

<Image source={{uri: imageBase64}} style={styles.image} /> 

Answer 2

Nachdem Sie den Blob erhalten haben:

let imageUri = "data:image/png;base64," + blob; 

<Image source={{uri: userImage, scale: 1}} style={{height: 30, width: 30}}/> 

Answer 3

Mai von react-native-fetch-blob gelöst werden, es geht um issue #854