图像未出现在视图屏幕上 - Angular 项目

Question

我有一个页面可以显示我的 Angular 项目上的“啤酒”信息。我收到路线快照上的啤酒信息，它正在工作。然后，我获取啤酒图像的名称并访问 API 来获取图像。一切正常，但在 html 中，所有字段都会出现，只有图像不会出现。

我在表格上有相同的代码，并且图像出现了。我做错了什么？

这是该组件的代码：

import {
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  NO_ERRORS_SCHEMA,
  OnInit
} from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatSidenavModule } from '@angular/material/sidenav';
import { ActivatedRoute } from '@angular/router';
import { MatListModule } from '@angular/material/list';

import { Beer } from '../../model/beer';
import { CommonModule, Location, NgFor, NgIf } from '@angular/common';
import { MatCardModule } from '@angular/material/card';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatDividerModule } from '@angular/material/divider';
import { MatIconModule } from '@angular/material/icon';
import { StartComponent } from '../../shared/components/star-rating/star-rating.component';
import { FileUploadService } from '../../services/file-upload.service';

@Component({
  selector: 'app-beer-view',
  templateUrl: './beer-view.component.html',
  styleUrls: ['./beer-view.component.scss'],
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [
    NgIf,
    NgFor,
    MatSidenavModule,
    MatButtonModule,
    MatListModule,
    MatCardModule,
    MatToolbarModule,
    MatDividerModule,
    MatIconModule,
    StartComponent,
    CommonModule
  ],
  schemas: [NO_ERRORS_SCHEMA]
})
export class BeerViewComponent implements OnInit {
  beer!: Beer;
  fileName? = '';
  imageShow: any;
  isImageLoading: boolean = true;

  constructor(
    private route: ActivatedRoute,
    private changeDetectorRef: ChangeDetectorRef,
    private location: Location,
    private uploadService: FileUploadService) { }

  ngOnInit() {
    this.beer = this.route.snapshot.data['beer'];
    this.fileName = this.beer.image;
    this.obtainImage();
  }

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

  obtainImage(): void {
   console.log("obtain image");
   console.log(this.fileName);
    this.isImageLoading = true;
    this.uploadService.getFile(this.fileName).subscribe(
      (data) => {
        this.createImageFromBlob(data);
        console.log("ok");
        this.isImageLoading = false;
        console.log(this.isImageLoading);
      },
      (error) => {
        console.log("erro");
        this.isImageLoading = false;
        console.log(error);
      }
    );
  }

  createImageFromBlob(image: Blob) {
    let reader = new FileReader();
    reader.addEventListener(
      'load',
      () => {
        this.imageShow = reader.result;
        console.log(this.imageShow);
      },
      false
    );

    if (image) {
      reader.readAsDataURL(image);
    }
  }
}

这是视图组件的代码：

<mat-card appearance="outlined">

  <mat-toolbar color="primary">
    <h1>Beers Detail</h1>
  </mat-toolbar>

  <mat-table class="mat-elevation-z8">
    <mat-list>
      <mat-list-item><b>NAME : </b>{{ beer.name }}</mat-list-item>
      <mat-divider></mat-divider>
      <mat-list-item><b>TYPE :</b> {{ beer.type }}</mat-list-item>
      <mat-divider></mat-divider>
      <mat-list-item><b>ORIGIN :</b> {{ beer.origin }}</mat-list-item>
      <mat-divider></mat-divider>
      <mat-list-item
        ><b>PRICE :</b>
        {{ beer.price | currency : "EUR" : "symbol" : "1.2-2" }}</mat-list-item
      >
      <mat-divider></mat-divider>
      <mat-list-item><b>RATING :</b> {{ beer.rating }} </mat-list-item>
      <mat-divider></mat-divider>
      <mat-list-item *ngIf="!isImageLoading">
        <img [src]="imageShow" alt="Beer Image">
      </mat-list-item>
      <mat-divider></mat-divider>
    </mat-list>

    <mat-card-actions class="actions-center">
      <button
        mat-raised-button
        (click)="onCancel()"
        class="btn-space"
        type="button" >
        <mat-icon aria-hidden="false" fontIcon="keyboard_arrow_left"></mat-icon>
        Back
      </button>
    </mat-card-actions>
  </mat-table>
</mat-card>

屏幕：

我添加了一些日志，我可以看到我已经得到了正确的图像：

它正在表单页面上运行：

我已经尝试过使用修复 URL，并且它有效。不知道为什么图片没有出现。

我试图将它放在

<mat-card>

之外，我删除了除行之外的所有内容：

<img [src]="imageShow" alt="Beer Image">

我尝试过：

<img src="{{'data:image/jpg;base64,' + imageShow}}" />
<img src="{{ image_path }}" />

但这不起作用。

谢谢！

Answer 1

分配图像后需要手动调用更改检测：

this.createImageFromBlob(data);
this.changeDetectorRef.markForCheck();

另外，您应该使用 DomSanitizer

清理图像 src