React-Native使用从Blob转换而来的URL填充图像 [英] React-Native Populate image with URL that has been converted from a blob
问题描述
我正在尝试用URl填充图像
I am trying to populate an image with a URl
<Image source={{uri: this.state.imageURL}} style={styles.thumb} />
我使用提取API向服务器请求图片,并且它返回一个Blob.
I request the image from the server, using the fetch API, and it returns a blob.
然后我使用以下行将BLOB转换为URL:
I then convert the BLOB into a URL using the following line:
var imageURL = window.URL.createObjectURL(attachmentBLOB);
当我console.log()imageURL打印时:
When I console.log() the imageURL it prints:
blob:http%3A//localhost%3A8081/4ce24d92-0b7e-4350-9a18-83b74bed6f87
我没有收到任何错误或警告.图片只是不显示
I am getting no errors or warning. The image is just not displaying
我正在使用android模拟器.
I am using the android emulator.
请帮助.预先感谢!
推荐答案
解决方案
React-Native不支持Blob [ref: Git/React-Native ].为了使这项工作有效,我必须下载 react-native-fetch-blob 返回base64字符串.
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.
返回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填充图像:
Populate Image with base64
I then populate the image withe the returned base64Image with:
<Image source={{uri: imageBase64}} style={styles.image} />
这篇关于React-Native使用从Blob转换而来的URL填充图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!