Image 从Firebase实时数据库加载图像+;存储
我正在使用Firebase文档中的create react应用程序(react+redux+Firebase)创建类似于汽车图像库的东西。图像信息存储在Firebase实时数据库中,但实际图像文件存储在Firebase存储中。在componentWillMount中,我调用了一个动作创建者来获取这些图像:Image 从Firebase实时数据库加载图像+;存储,image,reactjs,firebase,redux,Image,Reactjs,Firebase,Redux,我正在使用Firebase文档中的create react应用程序(react+redux+Firebase)创建类似于汽车图像库的东西。图像信息存储在Firebase实时数据库中,但实际图像文件存储在Firebase存储中。在componentWillMount中,我调用了一个动作创建者来获取这些图像: this.props.fetchCars(); 在action creator中,此函数执行: export function fetchCars() { return (dispatc
this.props.fetchCars();
在action creator中,此函数执行:
export function fetchCars() {
return (dispatch, getState) => {
carsRef.on('value', snapshot => {
dispatch({
type: FETCH_CARS,
payload: snapshot.val()
});
});
};
}
该调度将转到我的减速机,并相应地更新状态。我的状态是这样的:
{
cars: {
make: "Toyota",
model: "Vios",
year: 2015,
fileName: "cars1.jpg",
fileFullPath: ""
}
}
获取后,图像的完整URL还不知道(fileFullPath),因为文件名只是用户上传的文件名。因此,我必须使用Firebase存储来获取可下载的Url,以便将其放入
标记中:
export function getFileFullPath(){
return (dispatch, getState) => {
var newState = Object.assign({}, getState());
var imgRef, carUrl;
_.map(newState.cars, (car, index) => {
imgRef = storageRef.child('images/'+car.img);
carUrl = imgRef.getDownloadURL().then( url => {
car.fileFullPath=url;
});
});
dispatch({
type: FILL_UP_URL,
payload: newState.cars
});
};
}
但是,当我运行这个时,它不起作用。第一次发送后,图像列表从实时数据库中正确检索,文件完整路径为空。第二次发送后,它仍然是空的。我想我这样做是有问题的,但我不知道怎么做