Question

我正在构建一个Angular2照片库应用。我已将图片单独上传到Firebase存储桶中，因此我的网站不需要上传功能。

目前，我的代码在加载应用时在控制台中返回{code: 404, message: "Not Found. Could not get object"}。尝试直接使用Firebase JS API，因为AngularFire2似乎还没有支持Storage。我想在 app.component.ts 中存在与我的存储参考相关的错误。对于Angular2来说还是一个新手，所以在我的代码中查找有关错误的反馈。谢谢！

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AngularFireModule } from 'angularfire2';
import 'firebase/storage';
import { environment } from '../environments/environment';
import { AppComponent } from './app.component';
import { GalleryComponent } from './gallery/gallery.component';

const appRoutes: Routes = [
  { path: 'gallery', component: GalleryComponent }
];

@NgModule({
  declarations: [
    AppComponent,
    GalleryComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true }
    ),
    AngularFireModule.initializeApp(environment.firebase)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
import { FirebaseApp } from 'angularfire2';
import * as firebase from 'firebase/app';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = '';
  subtitle = '';

  constructor(private fb: FirebaseApp) {
    const imageStorageRef = fb.storage().ref().child('images');
    imageStorageRef.getDownloadURL().then(url => {
      console.log(url)
    });
   }

  images;

}

app.component.html

<div style="text-align:center">
  <h1>{{title}}</h1>
  <h3>{{subtitle}}</h3>

  <gallery [datasource]=images></gallery>
</div>

gallery.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'gallery',
  templateUrl: './gallery.component.html',
  styleUrls: ['./gallery.component.css']
})
export class GalleryComponent {
  @Input() datasource;
  selectedImage;

  setSelectedImage(image) {
    this.selectedImage = image;
  }

}

gallery.component.html

<div class="modal fade" id="selectedImageModal" >
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <div class="selectedImage" *ngIf="selectedImage">
          <img src="{{selectedImage.url}}" class="img-responsive" >
          <div class="caption">
            <p><span> {{selectedImage.caption}} </span></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="container fluid">
    <ul id="thumbnailsList">
       <li *ngFor="let image of images | async" >
          <img [src]="image" class="tn" width="30%"
          data-toggle="modal" data-target="#selectedImageModal"
                  (click)=setSelectedImage(image)>
       </li>
    </ul>
</div>

如何使用Angular2从Firebase存储中检索图像？

0 个答案: