在React Native(Expo)中显示Blob图像 [英] Display blob image in react native (Expo)
本文介绍了在React Native(Expo)中显示Blob图像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在我的react本机项目中具有以下访存函数以从MS Graph返回blob图像,该返回有效,但我似乎无法将blob显示为图像.
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 }}/>
推荐答案
一种方法是将blob转换为base64并将其用作uri,如 rn-fetch-blob 并使用路径,因为它更直接向前.检查此示例:
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() }}/>
})
这篇关于在React Native(Expo)中显示Blob图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文