Question

所以我试图显示带有动态uri / path的图像（在初始化时，它显示一个占位符图像，然后进行更改），如下所示：

<Image source={this.state.pickedImage == null? require('./Placeholder.jpeg'):{uri: this.state.pickedImage}}/>

其中this.state.pickedImage初始化为null，然后使用react-native-image-picker的{{1}}和launchCamera进行更改，如下所示：

launchImageLibrary

（我应该指出，我完全以相同的方式实现了cameraHandler = () => { ImagePicker.launchCamera({title: "Pick an Image", maxWidth: 800, maxHeight: 600}, res => { if (res.didCancel) { console.log("User cancelled!"); } else if (res.error) { console.log("Error", res.error); } else { this.setState({ pickedImage: res.uri, imageSize: res.fileSize, }); } }); }}; ，因此我并没有真正将它放在这里的理由。）

虽然占位符图像显示得很好，但是每当我上传新图像时，launchImageLibrary似乎根本无法渲染，而我只剩下背景。

我尝试过的事情：

我已经尝试过像在<Image/>中初始化this.state.pickedImage这样的事情：

state

，然后添加图像标签，例如：

pickedImage: require('./Placeholder.jpeg').uri

但是可惜，这最终使我无法渲染任何图像。

我曾考虑过动态地将路径绑定到here之类的<Image source={{uri: this.state.pickedImage}} />（以及该站点上的许多地方），但是据我了解，您需要知道可能的图像想要事先成为一个人，如果我使用相机，那我真的做不到。（而且，这并不是像我可以预先设置列表并导出用户手机上的每个图像，所以我的双手被绑在了那里。）（显然，无法真正动态绑定以要求（）我寻找的方式，because the package manager doesn't work that way）

有什么方法可以渲染这些require()？任何帮助表示赞赏！

（我使用的是本机0.57.4 btw）

Answer 1

您使用哪个“反应本机”版本？并非在所有平台上都适用吗？ require('./image.jpg')应该可以工作，也许您的URI出了点问题。或者尝试加载Image.resolveAssetSource(source);

Answer 2

我认为您的res.uri不好。

在我从图库加载图像的项目中，我有res.node.image.uri，就像这样：

 <Image style={styles.imageItem}
    source={{ uri: res.node.image.uri }}
 />

Answer 3

结果发现解决方案非常愚蠢，但是我要做的就是为标签设置宽度和高度，例如：

<Image style={{width:100,height:100}} source={this.state.pickedImage == null? require('./Placeholder.jpeg'):{uri: this.state.pickedImage}}/>

我最初忽略了此解决方案，因为我做了类似的事情：

<Image style={{width:'100%',height:'100%'}} source={this.state.pickedImage == null? require('./Placeholder.jpeg'):{uri: this.state.pickedImage}}/>

当时不起作用，但现在可以了。我不知道为什么，但是现在就可以了。如果有人知道为什么，我将不胜感激。

React Native：图像不显示动态/本地URI

3 个答案: