React Native <Image>无法从Android的SD卡加载图像

Question

我正在尝试使用React Native图像组件从外部SD卡加载照片，但在Android上未呈现。我甚至检查了该位置是否缺少图像，但这不是问题。但是，在iOS的情况下，从拍摄照片后的位置加载图像有效。

 <Image source={{uri:'/storage/emulated/0/Pictures/image-0ea0d714-9469-432b-8869-b6637be2be10.jpg'}} style={{height:200, width:200}} />

这是我的 AndroidManifest.xml 中的权限列表：

<!-- For Image picker start -->
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <uses-feature android:name="android.hardware.camera" android:required="false"/>
    <uses-feature android:name="android.hardware.camera.autofocus" android:required="false"/>

- Rajan Twanabashu

---

你尝试过在 uri 后面添加 file:/ 吗？像这样：source={{uri:'file://storage/... - Ivan Chernykh

不，完全没有。我已经将其删除了。 - Rajan Twanabashu

@BlackTiger：你找到这个问题的解决方案了吗？如果找到了，请分享一下。对很多人来说会很有帮助。 - Sriraman

还没有。还没有机会看。 - Rajan Twanabashu

Answer 1

刚刚遇到了这个问题，通过在文件路径前添加file://解决了它。

因此，不再是：

 <Image source={{uri:'/storage/emulated/0/Pictures/myImage.jpg'}} style={myImageStyle} />

使用：

 <Image source={{uri:'file:///storage/emulated/0/Pictures/myImage.jpg'}} style={myImageStyle} />

请注意这里有三个斜杠连续出现，而不是像@Cherniv建议的只有两个。

- DSquare

---

我正在使用主题代码，但它不能按需要工作：<Image source={{ uri: 'file:///var/mobile/Media/DCIM/101APPLE/IMG_1861.PNG' }} style={...} />。请帮我理解我的代码存在什么问题。 - David

和David一样 - Fantasim

Answer 2

我们应该获取'READ_EXTERNAL_STORAGE'权限

请参考此链接

- Sachinthra

Answer 3

DSquare 是对的，除非你在运行 IOS。在这种情况下，'file：//' 不起作用。

<Image source={{uri:`${Platform.OS === "android" ? 'file://' : ''}/storage/emulated/0/Pictures/myImage.jpg`}} style={myImageStyle} />

第二个问题是，在IOS上，路径/storage/emulated/0也不存在。

您可以使用react-native-fs来使生活更轻松。

import RNFS from "react-native-fs";
...
renderPhoto() {
    return <Image source={{uri:`${Platform.OS === "android" ? 'file://' : ''}/${RNFS.PicturesDirectoryPath}/myImage.jpg`}} style={myImageStyle} />
}

RNFS.PicturesDirectoryPath 在 Android 上的翻译是 /storage/emulated/0/Pictures。

不再头痛，不再纳闷哪个设备/平台上的路径是哪个。

- DerpyNerd