Как отобразить на веб-странице картинку, которую я сохранил в хранилище на firebase? (с angular8) - PullRequest
Новая
       6

Как отобразить на веб-странице картинку, которую я сохранил в хранилище на firebase? (с angular8)

0 голосов
/ 27 мая 2020

Я хочу отобразить на своей веб-странице изображение, которое я сохранил в хранилище на firebase.
Фон: я создал в хранилище папку с именем «фотографии» и поместил туда файл с именем «dog.jpg» . Мне помогли с сайта: https://firebase.google.com/docs/storage/web/start
Затем я написал в коде angular (в app.component.ts): 

import { Component } from '@angular/core';
//for firestore we added these 2 imports
import { AngularFirestore } from '@angular/fire/firestore';
import { Observable } from 'rxjs';
//for firestore documents:
import { AngularFirestoreDocument } from '@angular/fire/firestore';
//for firestore documents:
export interface Item { name: string; }
//for storage:
import { AngularFireStorage } from '@angular/fire/storage';
import { finalize } from 'rxjs/operators';
import * as firebase from 'firebase';

@Component({
  selector: 'app-root',
  templateUrl:`
  <p>app component</p> 
  <img src={{spaceRef}}/>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // Get a reference to the storage service, which is used to create references in your storage bucket
  public storage = firebase.storage();
  // Create a storage reference from our storage 
  storageRef = this.storage.ref();
  spaceRef = this.storageRef.child('photos/dog.jpg');
  // spaceRef now points to "photos/dog.jpg"
}

Когда я запускаю код, на веб-странице написано «Cannot GET /».
и на терминале: 

 ERROR in HostResourceResolver: could not resolve 
  <p>app component</p> 
  <img src={{spaceRef}}/>

Не могли бы вы помочь мне найти проблему? Спасибо! :)

Ответы [ 2 ]

3 голосов
/ 27 мая 2020

Для тега img вам нужен URL вместо ссылки на хранилище. Вы можете получить URL-адрес загрузки для файла, вызвав метод getDownloadURL () для ссылки на хранилище. 

import { Component } from '@angular/core';
//for firestore we added these 2 imports
import { AngularFirestore } from '@angular/fire/firestore';
import { Observable } from 'rxjs';
//for firestore documents:
import { AngularFirestoreDocument } from '@angular/fire/firestore';
//for firestore documents:
export interface Item { name: string; }
//for storage:
import { AngularFireStorage } from '@angular/fire/storage';
import { finalize } from 'rxjs/operators';
import * as firebase from 'firebase';

@Component({
  selector: 'app-root',
  templateUrl:`
  <p>app component</p> 
  <img src="{{spaceRef}}"/>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // Get a reference to the storage service, which is used to create references in your storage bucket
  public storage = firebase.storage();
  // Create a storage reference from our storage 
  storageRef = this.storage.ref();
  spaceRef = "";
  // spaceRef is now empty 
  constructor(){
      this.storageRef.child('photos/dog.jpg').getDownloadURL().then((url) => {
           this.spaceRef = url;
           // spaceRef now points to URL of "photos/dog.jpg"
      };
  }
}

Для получения дополнительной информации: https://firebase.google.com/docs/storage/web/download-files#download_data_via_url

2 голосов
/ 27 мая 2020

Должен сказать, я не смотрел, что вызвало вашу проблему. Пытался сделать то же самое, что и вы, следуя документации. Подумайте, что главное различие между тем, что я сделал, и тем, что вы делаете, - это внедрение AngularFireStorage.

TS 

  imageUrl$: Observable<string>;
  constructor(private storage: AngularFireStorage) {
    this.imageUrl$ = storage.ref("test.png").getDownloadURL();
  }

HTML

<img [src]="imageUrl$ | async">

Вот вам рабочий стекблиц

...