10

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

BLOB 显示到控制台时：在此处输入图像描述

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

var blobUrl = URL.createObjectURL(blob);

显示到控制台时的 blobUrl 在此处输入图像描述

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

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

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

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

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

谢谢。

4

3 回答 3

7

解决方案

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} />
于 2016-08-05T10:04:21.053 回答
5

收到 blob 后：

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

<Image source={{uri: imageUri, scale: 1}} style={{height: 30, width: 30}}/>
于 2016-07-21T16:18:34.763 回答
2

可以通过react-native-fetch-blob解决，关于issue #854

于 2016-08-02T12:46:50.747 回答