将blob转换为React Native中的图像

Question

我在aws S3:中有一个blob

https://s3.us-east-2.amazonaws.com/fakedomain.com/2021-12-23T21%14%05.888Z-斑点

我正在尝试在卡片中显示它

<Card.Cover source={{uri: https://s3.us-east-2.amazonaws.com/fakedomain.com/2021-12-23T21%14%05.888Z-blob }} />

当在Android上运行时，我得到

cannot create blob for URL 

该图像最初是jpeg

Answer 1

您必须首先将blob转换为对象URL格式。你可以使用下面的代码，伙计：

const s3Url = https://s3.us-east-2.amazonaws.com/fakedomain.com/2021-12-23T21%14%05.888Z-blob;
let blob = await fetch(s3Url).blob()
let objectURL = URL.createObjectURL(myBlob);

Answer 2

所以，我选择了另一条路线。我将图像选择器中的base64字符串存储在s3中。从那里，我在Nodeneneneba API中获取了它，并将其添加到响应中，这样我就不必直接从本机应用程序引用s3。工作起来很有魅力。

所以在节点中它看起来像：

async _downloadFile(key) {
return new Promise((resolve, reject) => {
const params = {
Bucket: `BUCKET_NAME`,
Key: key
};
this.s3.getObject(params, (err, data) => {
if (err) {console.error(err); reject(err);}
resolve(data.Body.toString());
console.log(`base64 str has been retrieved!`);
});
});
};
// END OF FUNCTION BODY BELOW
resolve(Promise.all(res.rows.map(async (listing) => {
if (listing.image) {
const data = await this._downloadFile(listing.image);
return {
...listing,
image: data,
};
}
})));

我在我的React Native应用程序中创建了这个实用程序来提供它：

export function base64ToImage(base64String:string) {
return `data:image/jpg;base64,${base64String}`
}