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

时间:2016-10-31 23:04:03

标签: react-native react-native-image

在我的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 }} />)替换源时,它会返回相机拍摄的图像并使用相同的代码存储在设备上但是静态图像没有发生。建议?

1 个答案:

答案 0 :(得分:4)

对于静态图片,您需要指定如下source

source={require('static_image_path_relative_current_directory')

仅针对远程和本地文件(非静态),我们需要在uri中指定source,如下所示

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