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

Question

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

当显示到控制台时，BLOB：

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

var blobUrl = URL.createObjectURL(blob);  

显示到控制台时显示blobUrl

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

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

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

我正在使用连接到本地主机的android模拟器。可能与BLOB url被存储到本地主机有关吗？

还是可能是简单的语法错误？

谢谢。

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

Answer 2

收到 blob 后：

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

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