0
votes

Afficher une image blob dans Reall Native (Expo)

J'ai la fonction d'extraction suivante dans mon projet natif de réact pour renvoyer une image blob de MS Graph, le retour fonctionne, mais je ne peux pas sembler afficher le blob comme une image.

   <Image source={{uri: BlobImage}} style={{ height: 200, width: null, flex: 1 }}/>

react-native microsoft-graph-api expo blob

3 commentaires

Comment essayez-vous de montrer l'image? Pouvez-vous mettre un exemple plus détaillé?

Vérifiez ma réponse ci-dessous, espère travailler pour vous :-)

Avez-vous trouvé une solution? Parce que j'ai eu cette question.

3 Réponses :

0
votes

Un moyen consiste à convertir votre blob en base64 et à l'utiliser comme URI comme décrit ici Mais je préférerais utiliser RN-FETCH-BLOB et utiliser le chemin car est plus simple effronté. Vérifiez cet exemple:

RNFetchBlob
  .config({
    fileCache : true,
    // by adding this option, the temp files will have a file extension
    appendExt : 'png'
  })
  .fetch('GET', 'http://www.example.com/file/example.zip', {
    //some headers ..
  })
  .then((res) => {
    // the temp file path with file extension `png`
    console.log('The file saved to ', res.path())
    // Beware that when using a file path as Image source on Android,
    // you must prepend "file://"" before the file path
    imageView = <Image source={{ uri : Platform.OS === 'android' ? 'file://' + res.path() : '' + res.path() }}/>
  })

3 commentaires

RN-Fech-Blob n'est pas pris en charge avec Expo

Qu'en est-il de l'autre solution que j'ai mis en premier? L'avez-vous essayé?

Vous êtes très bienvenu! ;)

0
votes

Bien qu'il y ait déjà une réponse pour cela et qu'elle est marquée comme résolue, j'ajoute ici ma solution.

J'ai essayé réagir-native-fetch-blob sans succès.

Initialement. J'ai défini le responsable pour être 'ArrayBuffer' xxx

maintenant la réponse a une arraybuffer dans photo.data xxx

sur Mon écran, j'ai affiché l'image utilisant le paquet base64-arraybuffer. xxx

0 commentaires

0
votes

Après beaucoup de temps perdu, cela fonctionne bien avec réagissaire natif> 0,60 et Expo à l'aide de réact-natif-image-sélecteur ou d'expo-image-sélecteur et Axios.

const {uri} = file;
const uriParts = uri.split('.');
const fileType = 'image/' + uriParts[uriParts.length - 1];

const data = new FormData();
data.append('image', {type: fileType, uri: uri, name: 'image'});
data.append('first_name', 'John Doe')

const req = await axios.post(url, data, {headers: {'Content-Type': 'multipart/form-data'} });

0 commentaires