图像未显示在视图屏幕上Angular 投影

我有一个页面来显示我的Angular 项目的"啤wine "信息.我在路由快照上收到了啤wine 信息，它正在工作.然后，我获取啤wine 图像的名称并访问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>

屏幕:

enter image description here个

我添加了一些日志(log)，我可以看到我已经得到了图像OK:

enter image description here

它正在表单页面上工作:

enter image description here

我已经try 了修复URL，它起作用了.我不知道为什么图像没有出现.

我试着把它放在<mat-card>之外，我删除了所有的东西，除了那行:

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

我试过:

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

但这并不管用.

谢谢!