React Native：图像不显示 dynamic/local URI

Question

所以我正在尝试显示具有动态 uri/path 的图像（在初始化时显示占位符图像，然后稍后更改），如下所示：

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

其中 this.state.pickedImage 初始化为 null，然后使用 react-native-image-picker 的 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/> 似乎根本没有呈现，我只剩下背景。

我试过的：

我试过在 state 中初始化 this.state.pickedImage，例如：

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

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

<Image source={{uri: this.state.pickedImage}} />

但遗憾的是，这最终导致我无法渲染任何图像。

我考虑过将路径动态绑定到 require()，例如 here (and also many places on this site), but as I understand it, you need to know what the potential images you might want to be from beforehand, and if I'm using the camera, I can't really do that. (Also, it's not like I can set up a list and export every image on the user's phone from beforehand, so my hands are tied there.) (Apparently, there's no way to really dynamically bind to require() the way I'm looking for, because the package manager doesn't work that way)

有什么方法可以渲染这些 uri 吗？感谢您的帮助！

（顺便说一句，我使用的是 react-native 0.57.4）

Answer 1

您使用的是哪个 'react-native' 版本？它不适用于所有平台？ 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：图像不显示 dynamic/local URI

React Native: Image not displaying with dynamic/local URI

javascript

jsx

react-native

react-native-image-picker