React-native - 使用已转换为 URL 的 Blob 填充图像

Posted 2023-02-23

【中文标题】React-native - 使用已转换为 URL 的 Blob 填充图像

【英文标题】：React-native - Populate image with Blob that has been converted to a URL

【发布时间】：2016-11-25 04:59:20

【问题描述】：

我想用 uri 填充图像。 我从服务器请求图像，它返回一个 BLOB。

BLOB 显示到控制台时：

然后我将 BLOB 转换为具有以下行的 URL：

var blobUrl = URL.createObjectURL(blob);  

blobUrl 显示到控制台时

然后我尝试使用 URL 填充图像：

<Image source=uri: blobURL style=width: 100, height: 50 />

图像不会显示。我该怎么办？

我正在使用连接到 localhost 的 android 模拟器。可能与将 BLOB url 存储到 localhost 的情况有关？

或者它可能是一个简单的语法错误？

谢谢。

【参考方案1】：

解决方案

React-Native 不支持 blob [参考：Git/React-Native]。为了让它工作，我必须下载react-native-fetch-blob，它返回一个base64字符串。

返回base64字符串的函数：

var RNFetchBlob = require('react-native-fetch-blob').default;

getImageAttachment: function(uri_attachment, mimetype_attachment) 

  return new Promise((RESOLVE, REJECT) => 

    // Fetch attachment
    RNFetchBlob.fetch('GET', config.apiRoot+'/app/'+uri_attachment)
      .then((response) => 

        let base64Str = response.data;
        var imageBase64 = 'data:'+mimetype_attachment+';base64,'+base64Str;
        // Return base64 image
        RESOLVE(imageBase64)
     )

   ).catch((error) => 
   // error handling
   console.log("Error: ", error)
 );
,

使用 base64 填充图像 然后我使用返回的 base64Image 填充图像：

<Image source=uri: imageBase64 style=styles.image />

【参考方案2】：

收到 blob 后：

let imageUri = "data:image/png;base64," + blob;

<Image source=uri: imageUri, scale: 1 style=height: 30, width: 30/>

【参考方案3】：

可能被react-native-fetch-blob解决，是关于issue #854

【讨论】：

谢谢你的权利。几天前我让它工作了。我只是没有机会详细描述我是如何做到的。