Question

我在表格中有个人资料照片字段。首先，表单具有占位符Image，用户可以单击占位符Image并选择另一个与表单一起提交。更改Image时，我希望新的Image以表格形式显示。对于ImagePicker选项，我使用的是Expo ImageManipulator和uri，它们将返回Image。

问题在于，当用户选择新照片时，我在Image组件中得到了空白背景。下面的代码显示了我如何获取，操作和尝试显示render() { [...] <ProfileImageEdit changePicture={this._onProfileImagePicker} picture={this.state.photo} uri={this.state.photoChanged} /> [...] }; _onProfileImagePicker = async () => { let cameraRollPermission = await this._getCameraRollPermissionAsync(); if (cameraRollPermission) { let res = await ImagePicker.launchImageLibraryAsync({ mediaTypes: 'Images', allowsEditing: true, aspect: [1, 1], quality: 1, base64: false }); if (!res.cancelled) { let fRes = await ImageManipulator.manipulate(res.uri, [{ resize: { width: 200, height: 200 } }], { compress: 0.5, format: 'png', base64: false }); this.setState({ photo: fRes.uri, photoChanged: true }); } } }：

表格

export default class ProfileImageEdit extends React.Component {
    render() {
        console.log(this.props.uri, this.props.picture);
        return (
            <TouchableOpacity
                onPress={() => this.props.changePicture()}
            >
                <View style={styles.container}>
                    <Image
                        source={(!this.props.uri ?
                            this.props.picture :
                            { uri: this.props.picture })
                        }
                        style={styles.image}
                        blurRadius={0.4}
                    />
                </View>
            </TouchableOpacity>
        );
    }
}

表单图像组件

<script>

Answer 1

您需要将具有 uri键的对象传递给Image组件。

在您的代码中，您缺少源对象中的uri键，请尝试以下操作：

<Image
    source={{ uri: this.props.uri || this.props.picture }}
    style={styles.image}
    blurRadius={0.4} />

在图片组件中使用Expo显示所选照片-React Native

1 个答案: