【发布时间】：2019-12-14 00:07:44
【问题描述】：
我想显示存储在 firebase 中的图像，但出现错误为 GET http://localhost:4200/undefined 404 (Not Found)
我尝试将条件添加为 *ngIf="albumImages.userImage!== undefined" 错误消失了，但图像仍然没有显示。
HTML 文件
<h1>Your Gallery</h1>
<div class="uk-grid-match uk-child-width-expand@s uk-text-center" uk-grid>
<div *ngIf="albumImages.length > 1">
<div class="uk-card uk-card-hover uk-card-body">
<img [src]="getSantizeUrl(albumImages.userImage)" width="180" class="uk-margin-large-left uk-margin-medium-top" />
</div>
<div class="uk-flex" *ngFor="let image of albumImages">
<div class="uk-card uk-card-hover uk-card-body" *ngFor="let singleImage of image.multiImages">
<img [src]="getSantizeUrl(singleImage)" width="180" class="uk-margin-large-left uk-margin-medium-top" />
</div>
</div>
</div>
</div>
TS 文件
ngOnInit() {
this.imageUpload.getImages().subscribe((res)=> {
this.albumImages = res;
console.log(this.albumImages);
},
error => {
this.error = error.message,
console.log(error);
}
);
}
public getSantizeUrl(url : string) {
return this.sanitizer.bypassSecurityTrustUrl(url);
}
单文件上传表单组件TS文件
ngOnInit() {
this.initForm();
}
initForm() {
this.singleImageForm = this.fb.group({
imageName : ['', Validators.required],
uploadDate: [''],
userImage: ['', Validators.required]
});
}
public getSantizeUrl(url : string) {
return this.sanitizer.bypassSecurityTrustResourceUrl(url);
}
/* Preview Single Image Function */
onFileUpload(event:any) {
const reader = new FileReader();
if (event.target.files && event.target.files.length) {
const [file] = event.target.files;
reader.readAsDataURL(file);
reader.onload = () => {
this.singleImageForm.patchValue({
userImage: reader.result
});
this.url = event.target.files;
};
}
else {
UIkit.notification({message:'Only Single Image can be uploaded', status: 'danger'});
}
}
onSubmit() {
this.imageUpload.singleImageSubmit(this.singleImageForm.value).subscribe((res) => console.log(res))
UIkit.notification({message: 'Image Uploaded Successfully', status: 'success'});
}
}
服务文件
getImages() {
return this.http.get<{[key: string]: IPhotos}>('https://angularimageupload-3f681.firebaseio.com/.json').pipe( map (responseData => {
const albumArray: IPhotos[] = [];
for(const key in responseData) {
if(responseData.hasOwnProperty(key)) {
albumArray.push({ id: key, ...responseData[key] })
}
}
return albumArray;
}))
}
图像应显示存储在 firebase 中。
【问题讨论】：
-
您好！您能否在答案中添加一个 responseData 示例？没有它，很难知道是什么导致了你的问题；）
-
你为什么还要用
http获取图像？有了该评论，我确实假设您正在以某种形式使用 firebase。 -
专辑图片是数组。但是您尝试
albumImages.userImage是错误的 -
albumImages数组里面有什么？ -
@Martin Choraine 我在我的问题中添加了我的 responseData 的屏幕截图。
标签： angular