这是我的代码:

<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 api将base64转换为FileReader,然后显示它。

代码:

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

07-24 09:38
查看更多