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

收到blob后：

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

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

Answer 3

可以通過react-native-fetch-blob來解決，這是關於問題＃854