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

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

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

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

感谢。

Answer 1

的解决方案

React-Native不支持blob [ref：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

可由react-native-fetch-blob解决，关于issue #854

Answer 3

收到blob后：

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

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