这是我的代码:
<Image source={BlobImage} style={{ height: 200, width: null, flex: 1 }} />
其中 BlobImage 是像这样的 blob 字符串中的图像c916851b-3e53-432d-8d18-3de293776859?offset=0&size=371537
。
编辑:
我将 base64 图像上传到 cpanel,它会自动转换为 Blob。当我从 cpanel 获取数据时,我得到一个缓冲区数组并且无法显示它。我试过了,但没用
var blob = new Blob([img], {type: "image/png"})
var blobUrl = URL.createObjectURL(blob);
在渲染中
<Image source={{uri:blobUrl}} style={{ height: 200, width: null, flex: 1 }} />
其中 img
是来自 cpanel 的原始数据,它是一个字节数组。
这就是我使用 react-native-photo-upload 获取数据的方式
<PhotoUpload
onPhotoSelect={avatar => {
if (avatar) {
this.setState({
imageUrl: avatar
});
}}}>
最佳答案
您可以将 blob
从 FileReader
转换为 base64
api,然后显示它。
代码:
const fileReaderInstance = new FileReader();
fileReaderInstance.readAsDataURL(blob);
fileReaderInstance.onload = () => {
base64data = fileReaderInstance.result;
console.log(base64data);
}
一旦你得到它就显示它:
<Image source={{uri: base64ImageData}} style={{ height: 200, width: null, flex: 1 }} />
关于javascript - 如何在 React Native 中显示 blob 图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49915297/