angular - 在卡片图像上显示 Firebase 中保存的图像 URL？

Question

我需要帮助在卡片图像上显示图像，并使用从 firebase 数据库获取的 URL。 通过 key ，我获取节点的信息并在不同的对象中进行可视化。 通过 key ，我获取节点的信息并在不同的对象中进行可视化。我还获取了图像 URL，但我不知道如何将 URL 放在卡片上。

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

只需在 img 标签上添加 [src]="urlVariable" 即可。

就你的情况

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

[src] 允许您使用组件变量设置图像的 src。