来自相机的 Expo/React Native 图像路径答案

【问题标题】：Expo/React Native image paths from camera来自相机的 Expo/React Native 图像路径
【发布时间】：2020-10-06 20:27:42
【问题描述】：

我在 Expo 中使用Camera 包，我可以成功拍照。

拍照后，我得到一个带有数据的对象

Object {
  "height": 4096,
  "uri": "file:///var/mobile/Containers/Data/Application/7399B27C-F34B-4B2F-8F58-237D41136EE9/Library/Caches/ExponentExperienceData/asdasdasdefwefw/Camera/C3D87AB5-6B91-4A9E-83FC-DFSFEEWFEFSAFSD.jpg",
  "width": 2304,
},

现在为了显示这个图像，我想使用<ImageBackground /> 或<Image /> 组件。例如

 <ImageBackground source={require( Object.uri )} />

当然，这两个组件的问题在于require 的value must be a static path 不能接受变量。

那么如何在不将图像保存到照片库并使用图像选择器从库中打开它的情况下显示图像？

【问题讨论】：

可以省略require直接使用Object.uri吗？ require 在编译时处理，因此通常与用户输入一起使用没有意义
您是否尝试过您链接的文档的Local Filesystem Images section 中提到的内容？它指向MediaLibrary module，听起来它会完成你想要做的事情。
你试过 source={{ uri: Object.uri }}
@vpzomtrrfrt key 的名称是什么，文档没有说明 ?.. `source={{key: Object.uri}}
不确定您从哪里获得密钥，我希望 source={Object.uri} 可以工作。

标签： javascript react-native ecmascript-6 expo

【解决方案1】：

如果您使用的是图像的绝对路径，则可以如下所示 -

<ImageBackground source={{uri: Object.uri}} />

对于具有内联样式的图像 -

<Image style={{ height: 200, resizeMode: 'cover' }} source={{ uri: Object.uri }} />

【讨论】：

您的 ImageBackground 示例不起作用，两个示例都必须使用第二个示例中描述的 uri 键，这有效