React-native - 使用已转换为URL的Blob填充图像 [英] React-native - Populate image with Blob that has been converted to a URL

问题描述

我想用uri填充图像。

我从服务器请求图像并返回BLOB。

显示到控制台时的BLOB：

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

  < Image source = {{uri：blobURL}} style = {{width：100，height：50}} /> 
  

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

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

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

谢谢。

解决方案

解决方案

React-Native不支持blob [参考： Git /反应母语。为了实现这一目标，我必须下载 react-native-fetch-blob 返回base64字符串。

返回base64字符串的函数：

  var RNFetchBlob = require（'react-native-fetch-blob'）。默认值; 
 
 getImageAttachment：function（uri_attachment，mimetype_attachment）{
 
返回新Promise（（RESOLVE，REJECT）=> {
 
 //获取附件
 RNFetchBlob.fetch（'GET'，config.apiRoot +'/ app /'+ uri_attachment）
 .then（（response）=> {
 
 let base64Str = response。数据; 
 var imageBase64 ='data：'+ mimetype_attachment +'; base64，'+ base64Str; 
 //返回base64图片
 RESOLVE（imageBase64）
}）
 
}）。catch（（error）=> {
 //错误处理
 console.log（错误：，错误）
}）; 
}，
  

用base64填充图片

然后我用返回的base64Image填充图像：

 < Image source = {{uri：imageBase64}} style = {styles.image} /> 
  

I want to populate an image with a uri.
I request the image from the server and it returns a BLOB.

BLOB when displayed to console:

I then convert the BLOB into a URL with the following line:

var blobUrl = URL.createObjectURL(blob);  

blobUrl when displayed to console

I then try and populate the Image with the URL:

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

The image will not display. What should I do?

I am using the android emulator which is connected to the localhost. Could possibly have something to do with that seen as the BLOB url would be stored to the localhost?

Or it could be a simple syntax error?

Thanks.

解决方案

Solution

React-Native does not support blobs [ref: Git/React-Native]. In order to get this working I had to download react-native-fetch-blob which returns a base64 string.

Function that returns base64 string:

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)
 });
},

Populate Image with base64
I then populate the image withe the returned base64Image with:

<Image source={{uri: imageBase64}} style={styles.image} />

这篇关于React-native - 使用已转换为URL的Blob填充图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！