如何在 React Native Expo 中从 firebase 检索图像?
How to retrieve image from firebase in react native expo?
我是 React Native 的新手,仍在边做边学。我已经在 firebase 中上传了我想在第二个屏幕上显示的图像。虽然,我不断收到类似
的错误
can't find variable: profileImageUrl
我正在尝试检索下一页的图像。
这是上传到 firebase 的代码:
const uploadImage = async () => {
const blob = await new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.onload = function () {
resolve(xhr.response);
};
xhr.oneerror = function () {
reject(new TypeError('Network request failed'));
};
xhr.responseType = 'blob';
xhr.open('GET', image, true);
xhr.send(null);
});
const ref = firebase.storage().ref().child('/ankit/');
const snapshot = ref.put(blob);
snapshot.on(
firebase.storage.TaskEvent.STATE_CHANGED,
() => {
setUploading(true);
},
(error) => {
setUploading(false);
console.log(error);
blob.close();
},
() => {
snapshot.snapshot.ref.getDownloadURL().then((url) => {
setUploading(false);
console.log('downlaod url', url);
return url;
});
}
);
};
这里是检索代码:
const [Image, setImage] = useState(false);
let imageRef = firebase.storage().ref('/ankit/');
imageRef
.getDownloadURL()
.then((url) => {
setImage({ profileimageUrl: 'url' });
})
.catch((e) => console.log('getting downloadURL of image error => ', e));
return (
<View>
<Image source={this.state.profileImageUrl}></Image>
</View>
)
您应该重构显示图像的代码。您正在使用新的钩子状态来存储状态,但尝试在 html
中使用旧反应状态语法的语法来使用它。应该是这样的:
const [image, setImage] = useState(false);
useEffect(() => {
let imageRef = firebase.storage().ref('/ankit/');
imageRef
.getDownloadURL()
.then((url) => {
setImage(url);
})
.catch((e) => console.log('getting downloadURL of image error => ', e));
},[])
return (
<View>
<Image src={image}></Image>
</View>
);
我是 React Native 的新手,仍在边做边学。我已经在 firebase 中上传了我想在第二个屏幕上显示的图像。虽然,我不断收到类似
的错误can't find variable: profileImageUrl
我正在尝试检索下一页的图像。
这是上传到 firebase 的代码:
const uploadImage = async () => {
const blob = await new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.onload = function () {
resolve(xhr.response);
};
xhr.oneerror = function () {
reject(new TypeError('Network request failed'));
};
xhr.responseType = 'blob';
xhr.open('GET', image, true);
xhr.send(null);
});
const ref = firebase.storage().ref().child('/ankit/');
const snapshot = ref.put(blob);
snapshot.on(
firebase.storage.TaskEvent.STATE_CHANGED,
() => {
setUploading(true);
},
(error) => {
setUploading(false);
console.log(error);
blob.close();
},
() => {
snapshot.snapshot.ref.getDownloadURL().then((url) => {
setUploading(false);
console.log('downlaod url', url);
return url;
});
}
);
};
这里是检索代码:
const [Image, setImage] = useState(false);
let imageRef = firebase.storage().ref('/ankit/');
imageRef
.getDownloadURL()
.then((url) => {
setImage({ profileimageUrl: 'url' });
})
.catch((e) => console.log('getting downloadURL of image error => ', e));
return (
<View>
<Image source={this.state.profileImageUrl}></Image>
</View>
)
您应该重构显示图像的代码。您正在使用新的钩子状态来存储状态,但尝试在 html
中使用旧反应状态语法的语法来使用它。应该是这样的:
const [image, setImage] = useState(false);
useEffect(() => {
let imageRef = firebase.storage().ref('/ankit/');
imageRef
.getDownloadURL()
.then((url) => {
setImage(url);
})
.catch((e) => console.log('getting downloadURL of image error => ', e));
},[])
return (
<View>
<Image src={image}></Image>
</View>
);