Afficher l'URL de l'image enregistrée dans Firebase sur une image de carte ?

Question

J'ai besoin d'aide pour afficher une image sur une carte avec une URL que je reçois de ma base de données dans firebase. Avec la clé, j'obtiens les informations d'un noeud et je les visualise dans différents objets. Avec la clé, j'obtiens les informations d'un nœud et je les visualise dans différents objets. J'obtiens aussi l'URL de l'image mais je ne sais pas comment mettre l'URL sur la carte.

edit-regu.componet.ts

   @Component({
  selector: 'app-edit-regu',
  templateUrl: './edit-regu.component.html',
  styleUrls: ['./edit-regu.component.css']
})
export class EditReguComponent implements OnInit {

  visible = true;
  selectable = true;
  removable = true;
  addOnBlur = true;
  languageArray: Language[] = [];
  @ViewChild('chipList',{ static: false }) chipList;
  readonly separatorKeysCodes: number[] = [ENTER, COMMA];
  selectedBindingType: string;
  editBookForm: FormGroup;
  BindingType: any = ['Procesado', 'En Proceso', 'Informacion Erronea'];

  ngOnInit() {
    this.updateBookForm();
  }

  constructor(
    public fb: FormBuilder,    
    private location: Location,
    private bookApi: BookService,
    private actRoute: ActivatedRoute,
    private router: Router
  ) { 
    var id = this.actRoute.snapshot.paramMap.get('id');
    this.bookApi.GetBook(id).valueChanges().subscribe(data => {
      this.languageArray = data.languages;
      this.editBookForm.setValue(data);
    })
  }

  /* Update form */
  updateBookForm(){
    this.editBookForm = this.fb.group({
      name: ['', [Validators.required]],
      Fec_Dia: ['', [Validators.required]],
      Direccion: ['', [Validators.required]],
      Imagen: ['', [Validators.required]],
      Comentario: ['', [Validators.required]],
      Fec_Mili: ['', [Validators.required]],
      latitud: ['', [Validators.required]],
      longitud: ['', [Validators.required]],
      id: ['', [Validators.required]],
      Cedula:['', [Validators.required]],
      proceso: ['', [Validators.required]], 
      tipo_de_irregularidad: ['', [Validators.required]] 

    })
  }

  /* Get errors */
  public handleError = (controlName: string, errorName: string) => {
    return this.editBookForm.controls[controlName].hasError(errorName);
  }

  goBack(){
    this.location.back();
  }

  updateBook() {
    var id = this.actRoute.snapshot.paramMap.get('id');
    if(window.confirm('Are you sure you wanna update?')){
        this.bookApi.UpdateBook(id, this.editBookForm.value);
      this.router.navigate(['list-gad']);
    }
  }

}

edi-regu.component.html

<!-- Title group  -->
<div class="title-group">
    <h1 class="mat-h1">Procesar Irregularidad</h1>
    <mat-divider fxFlex="1 0"></mat-divider>
  </div>

  <!-- form -->
  <div class="inner-wrapper">
    <form [formGroup]="editBookForm" (ngSubmit)="updateBook()" novalidate>
      <mat-card>
        <div class="controlers-wrapper">
          <!-- Book name -->
          <mat-form-field class="example-full-width">

            <input matInput placeholder="Tipo de Irregularidad" formControlName="tipo_de_irregularidad">

          </mat-form-field>

          <mat-form-field class="example-full-width">
            <input matInput placeholder="Fecha" formControlName="Fec_Dia">
          </mat-form-field>

          <mat-form-field class="example-full-width">
            <input matInput placeholder="Dirección" formControlName="Direccion">
          </mat-form-field>

           <mat-form-field class="example-full-width">
            <input matInput placeholder="Emisor de Irregularidad" formControlName="name">
          </mat-form-field>

          <mat-form-field class="example-full-width">
            <textarea matInput placeholder="Comentario" formControlName="Comentario"> </textarea>
          </mat-form-field>

        </div>
      </mat-card>

      <mat-card>
        <div class="controlers-wrapper" >
          <!-- Book binding -->
          <mat-form-field>
            <mat-label>Estado del Proceso</mat-label>
            <mat-select [(value)]="selected" formControlName="proceso">
              <mat-option [value]="bindingType" *ngFor="let bindingType of BindingType">{{bindingType}}</mat-option>
            </mat-select>
          </mat-form-field>

          <mat-card class="example-card">

            **<!-- card image code -->** <img class="example-card" mat-card-image  ng-src="Imagen" alt="Imagen">
          </mat-card>

        </div>
      </mat-card>

      <!-- Submit & Reset -->
      <mat-card>
        <div class="full-wrapper button-wrapper">
          <div class="button-wrapper">
            <button mat-flat-button color="warn">Update</button>
            <button mat-flat-button color="war" type="button" (click)="goBack()">Go Back</button>
          </div>
        </div>
      </mat-card>
    </form>
  </div>

Answer 1

Il suffit d'ajouter [src]="urlVariable" sur la balise img.

Dans votre cas

<img class="example-card" mat-card-image [src]="book.image_url" alt="Imagen">

[src] vous permet de définir le src d'une image avec une variable de composant.