Quiero establecer una imagen predeterminada antes de poder cargar cualquier imagen de mi galería aquí está mi código
state = { user: { avatar : require('../assets/user.png') } } handlePickAvatar = async () => { UserPermission.getCamerPermission() let result = await ImagePicker.launchImageLibraryAsync({ mediaTypes : ImagePicker.MediaTypeOptions.Images, allowsEditing: true, aspect:[4,3] }) if (!result.cancelled) { this.setState({ user: { ...this.state.user, avatar: result.uri } }); } } render() { return ( <View style={styles.container}> <Text style={styles.profile}>Profile</Text> <View style={styles.avatarPlaceholder} > <Image source={{ uri: this.state.user.avatar }} style={styles.avatar} /> </View> <TouchableOpacity onPress={this.handlePickAvatar}> <Text style={styles.text}>Load Image</Text> </TouchableOpacity> </View> ); }
Los resultados deberían ser así: la imagen del usuario debe estar predeterminada, pero aparece el error: el valor de uri no se puede convertir de doble a cadena
Hay alguna solución para esto ?
¡Gracias! ¡¡Actualizado!!
Verifique si user.avatar
tiene la imagen y luego muestre la imagen cargada. Si no está cargado, muestra la imagen predeterminada.
<View style={styles.container}> <View style={styles.avatarPlaceholder}> <Image source={{ uri: this.state.user.avatar || 'default image path' }} style={styles.avatar} /> </View> <TouchableOpacity onPress={this.handlePickAvatar}> <Text style={styles.text}>Load Image</Text> </TouchableOpacity> </View>