mit URL, die von einem Klecks umgewandelt wurden

Question

Ich versuche, ein Bild zu bevölkern mit einem URl

<Image source={{uri: this.state.imageURL}} style={styles.thumb} /> 

ich das Bild vom Server anfordern, der API-Abruf verwendet wird, und es gibt ein Klecks.

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

var imageURL = window.URL.createObjectURL(attachmentBLOB); 

Als ich console.log() die imageURL druckt:

blob:http%3A//localhost%3A8081/4ce24d92-0b7e-4350-9a18-83b74bed6f87 

ich keine Fehler oder eine Warnung erhalten . Das Bild wird gerade nicht angezeigt

Ich benutze den Android-Emulator.

Bitte helfen. Danke im Voraus!

Answer 1

Lösung

Reagieren Native 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} />