React-Native 使用从 blob 转换而来的 URL 填充图像
React-Native Populate image with URL that has been converted from a blob
我正在尝试用 URl
填充图像
<Image source={{uri: this.state.imageURL}} style={styles.thumb} />
我使用提取 API 从服务器请求图像,它 returns 一个 blob。
然后我使用以下行将 BLOB 转换为 URL:
var imageURL = window.URL.createObjectURL(attachmentBLOB);
当我 console.log() 图像URL 它打印:
blob:http%3A//localhost%3A8081/4ce24d92-0b7e-4350-9a18-83b74bed6f87
我没有收到任何错误或警告。图片就是不显示
我正在使用 android 模拟器。
请帮忙。提前致谢!
解决方案
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} />
我正在尝试用 URl
填充图像<Image source={{uri: this.state.imageURL}} style={styles.thumb} />
我使用提取 API 从服务器请求图像,它 returns 一个 blob。
然后我使用以下行将 BLOB 转换为 URL:
var imageURL = window.URL.createObjectURL(attachmentBLOB);
当我 console.log() 图像URL 它打印:
blob:http%3A//localhost%3A8081/4ce24d92-0b7e-4350-9a18-83b74bed6f87
我没有收到任何错误或警告。图片就是不显示
我正在使用 android 模拟器。
请帮忙。提前致谢!
解决方案
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} />