在React Native中将Base64字符串转换为图像

Question

问题

我使用Expo的React Native创建了一个社交媒体应用，并想要添加上传图片的功能。由于Expo不允许将文件转换为Blob以上传，所以我只是将Base64图像数据作为字符串上传到服务器数据库中。在从服务器下载数据后，我如何将此数据转换回可视化图像？

- user8749566

---

不要试图将图像作为 blob 上传，而是创建一个表单并将图像作为文件附加。您不应该将图像存储在数据库中，而应该将它们存储为从数据库引用的文件。请参见以下示例：https://github.com/g6ling/React-Native-Tips/tree/master/How_to_upload_photo%2Cfile_in%20react-native - Tom

你可以使用 react-native-fetch-blob 将图片转换为 base64，然后再从 base64 转换回图片。 - Shahzad

Answer 1

你可以这样做：

var base64Icon = 'data:image/png;base64,iVBORw0KGgoAAAANS...';
<Image style={{width: 50, height: 50}} source={{uri: base64Icon}}/>

在base64Icon变量中，你需要在 data:image/png;base64, 后面放置你的base64数据。就像这样：

var base64Icon = 'data:image/png;base64,{PLACE_YOUR_BASE64_DATA_HERE}';

- Sachin Rajput

---

<Image source={{ uri: data:image/png;base64,${item.appIcon}}} /> 我从API获取了Base64格式的图标，但在React Native Web中无法显示该应用程序图标。 - Harsha

如果我们想要下载它，该怎么办？ - Muhammad