Question

这是我的代码：

<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
                       });
                   }}}>

Answer 1

您可以将blob转换为base64来自FileReader 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 }} />

Answer 2

也许你可以试试这样的事情

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

如何在本机中显示blob图像

2 个答案: