如何在React Native中显示Blob图像 [英] How to display blob image in react native

问题描述

这是我的代码:

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

其中BlobImage是像这样的blob字符串中的图像c916851b-3e53-432d-8d18-3de293776859?offset=0&size=371537.

Where BlobImage is an image in blob string like thisc916851b-3e53-432d-8d18-3de293776859?offset=0&size=371537.

我将base64图片上传到cpanel，它会自动投射到Blob.当我从cpanel获取数据时，我得到了一个缓冲区数组，无法显示它.我试过了，但是没用

I upload a base64 image to cpanel, and it is automatically cast to Blob. When I fetch the data from cpanel, I get a buffer array and unable to display it. I tried this but it doesn't work

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的原始数据，它是一个字节数组.

Where img is the raw data from cpanel and it's a byte array.

这就是我使用react-native-photo-upload获取数据的方式

This is how I get the data using react-native-photo-upload

<PhotoUpload
    onPhotoSelect={avatar => {
                   if (avatar) {
                       this.setState({
                           imageUrl: avatar
                       });
                   }}}>

推荐答案

您可以从

You can convert the blob to base64 from FileReader api and then display it.

代码:

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

这篇关于如何在React Native中显示Blob图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！