编程语言
首页 > 编程语言> > javascript – React-native – 使用已转换为URL的Blob填充图像

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

作者:互联网

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

BLOB显示到控制台时:enter image description here

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

var blobUrl = URL.createObjectURL(blob);  

blobUrl显示到控制台时
enter image description here

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

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

图像不会显示.我该怎么办?

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

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

谢谢.

解决方法:

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

标签:javascript,react-native,blob,android-emulator,react-native-android
来源: https://codeday.me/bug/20191006/1862364.html