在 React Native 中访问静态/本地图像

Question

在我的 React Native 项目文件夹中，我有保存组件的 src 文件，还有一些我想在 iOS 和 Android 上使用的图像。如果我使用这个：

<Image style={{ width: 200, height: 200 }} source={require('../images/camera.png')} />

然后图像完美加载。但是，图像标签中的源将在用户拍照时动态创建。这段代码：

<Image style={{ width: 200, height: 200 }} source={{ uri: '../images/camera.png' }} />

不起作用。没有抛出错误，但没有显示图像。我确定我走在正确的轨道上，因为当我用道具（<Image style={{ width: 200, height: 200 }} source={{ uri: this.props.image }} />）替换源时，它将返回相机拍摄的图像并使用相同的代码存储在设备上，但对于静态图像它不会发生.有什么建议吗？

Answer 1

对于静态图像，您需要指定如下source

source={require('static_image_path_relative_current_directory')

仅对于远程和本地文件（非静态），我们需要在 source 中指定 uri，如下所示

source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}