我试图将选定的图像存储在应用程序中,而不是图像卷中。
这是我尝试过的:
await FileSystem.downloadAsync(
imageUri, // the image uri from expo-image-picker
FileSystem.documentDirectory + `${uuid}-image.jpg`
)
.then(({ uri }) => {
console.log("Finished downloading to ", uri);
})
.catch((error) => {
console.error(error);
});
我收到错误:
Unable to download file: Error Domain=NSURLErrorDomain Code=-1002 "unsupported URL"
我也试过:
await FileSystem.writeAsStringAsync(
FileSystem.documentDirectory + `spotPhotos/${uuid}-image.jpg`,
image.base64
);
当我尝试在 ImageBackground 组件中使用图像时,这似乎成功保存了图像,但我没有成功。
<ImageBackground
source={'data:image/png;base64'+imageFile}
style={{ borderRadius: 5, borderColor: 'black', width: 100, flex: 1, resizeMode: "cover", justifyContent: "center" }}
>
...
</ImageBackground>
错误提示无法读取文件夹:
getFile -> err [Error: File '/var/mobile/Containers/Data/Application/.../spotPhotos' could not be read.]
我可以使用 uri 保存图像文件本身吗?我是否需要将其转换为 base64 并返回?
看来我已经能够成功保存使用以下内容进行 base64 编码的图像:
await FileSystem.writeAsStringAsync(
FileSystem.documentDirectory + `spotPhotos/${uuid}-imagelocation.jpg`,
image.base64
);
并访问编码图像:
let imageFile = async () => {
let uri = FileSystem.documentDirectory + "spotPhotos/" + spot.imageloc;
let options = { encoding: FileSystem.EncodingType.Base64 };
let base64 = await FileSystem.readAsStringAsync(uri, options);
return (base64);
}
当我使用 console.log imageFile 时,我得到一大堆字符,然后导致 Vscodium 崩溃,即使我尝试使用 string.prototype.slice() 只记录前几个字符,所以我无法检查它,但我认为它是 base64 编码文件。
当我尝试将返回值引用为 Image 或 ImageBackground 组件的源时,如下所示:
<Image style={{width: 50, height: 50}} source={{imageFile}}/>
// or
<Image style={{width: 50, height: 50}} source={{imageFile()}}/>
// or
<Image style={{width: 50, height: 50}} source={{uri:`data:image/png;base64,${imageFile}`}}/>
// or
<Image style={{width: 50, height: 50}} source={{uri:`data:image/jpg;base64,${imageFile}`}}/>
我收到警告消息:提供给“Image”的无效 Prop “source”
。
我也收到一条错误消息
Error: You attempted to set the key `_65` with the value of 1 on an object
that is meant to be immutable and has been frozen.
由于 this post 中的建议不起作用,我的问题可能与我从文件中提取的数据有关。
在 expo 文件系统中存储和访问 jpg 文件的正确 api 用法是什么?
最佳答案
我用下面的代码得到了这个:
useEffect(() => {
if (data[spotIndex].image) {
imageFile();
}
}, [location]);
let imageFile = async () => {
if (data[spotIndex].image.length > 0) {
let uri = FileSystem.documentDirectory + data[spotIndex].image;
let getInfo = await FileSystem.getInfoAsync(uri);
getInfo && console.log(getInfo);
let options = { encoding: FileSystem.EncodingType.Base64 };
let base64 = await FileSystem.readAsStringAsync(uri, options);
setBase64Val("data:image/jpeg;base64," + base64);
}
};
<ImageBackground source={{ uri: base64Val }}>
关于javascript - 如何将图像从 expo-image-picker 保存到 expo-file-system 然后渲染它?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62763209/