Display blob image in react native (Expo)

问题

I have the following fetch function in my react native project to return a blob image from MS Graph, the return works but i cannot seem to display the blob as an image.

        //Blob Picture
      fetch('https://graph.microsoft.com/v1.0/me/photo/$value', {
        headers: { 'Authorization': "Bearer " + accessToken },
      })
        .then((response) => {
          // console.log(response);
               this.setState({ BlobImage: response});
        })
        .catch((error) => {
          console.error(error);
        });

Then i wish to display the image like so:

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

回答1:

One way is to convert your blob into base64 and use it as uri as described here But I would rather to use rn-fetch-blob and using path since is more straight forward. check this example:

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() }}/>
  })

回答2:

Although there is an answer already for this and it is marked as resolved, I'm adding here my solution.

I have tried react-native-fetch-blob without success.

Initially I set the responseType to be 'arraybuffer'

const photo = await graph.get('/me/photo/$value', {
      responseType: 'arraybuffer'
    });

Now the response has an arraybuffer in photo.data

const state = {
            photo: photo.data
};

On my Screen, I have displayed the image making use of the package base64-arraybuffer.

import Base64ArrayBuffer from 'base64-arraybuffer';
...
const photoURI = Base64ArrayBuffer.encode(state.photo);
...
<Image style={styles.profilePhoto} source={{ uri: `data:image/jpg;base64,${photoURI}` }} />

回答3:

After a lot of wasted time, this works well with React Native > 0.60 and Expo using react-native-image-picker or expo-image-picker and 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'} });

来源：https://stackoverflow.com/questions/55906214/display-blob-image-in-react-native-expo

标签

react-native

blob

microsoft-graph-api

expo