React-native

Question

我想用 uri 填充图像。
我从服务器请求图像，它 returns 一个 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

收到 blob 后：

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

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

Answer 2

可以通过react-native-fetch-blob, it's about issue #854

解决

Answer 3

解决方案

React-Native 不支持 blob [ref: Git/React-Native]. In order to get this working I had to download react-native-fetch-blob 其中 returns base64 字符串。

函数表示returns 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} />

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

React-native - Populate image with Blob that has been converted to a URL

javascript

blob

android-emulator

react-native-android

解决方案