javascript - component - React-native: poblar imagen con Blob que se ha convertido a una URL

react native stretch image

Question

Quiero llenar una imagen con un uri.
Solicito la imagen del servidor y devuelve un BLOB.

BLOB cuando se muestra a la consola:

Luego convierto el BLOB en una URL con la siguiente línea:

var blobUrl = URL.createObjectURL(blob);  

blobUrl cuando se muestra a la consola

Luego trato de poblar la imagen con la URL:

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

La imagen no se mostrará. ¿Que debería hacer?

Estoy usando el emulador de Android que está conectado al localhost. ¿Posiblemente podría tener algo que ver con eso visto ya que la URL BLOB se almacenaría en el host local?

¿O podría ser un simple error de sintaxis?

Gracias.

Answer 1

Después de haber recibido el blob:

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

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

Answer 2

Puede ser resuelto por reaction-native-fetch-blob , se trata del número 854

Answer 3

Solución

React-Native no admite blobs [ref: Git / React-Native ]. Para que esto funcionara tuve que descargar reaccionar-nativo-buscar-blob que devuelve una cadena base64.

Función que devuelve cadena base64:

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)
 });
},

Poblar imagen con base64
Luego llené la imagen con la base64Image devuelta con:

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