不显示来自后端的图像

Question

我从 Nestjs 后端传输到 Angular 前端的图像没有出现在浏览器中。

我从前端向后端发送一个查询，其中包含服务器上文件的路径（例如：“C:\MyFolder\MyFile.png”），它将读取图像并将流发送回前端。然后前端会将 blob 转换为图像，并将 img 元素的 src 属性设置为图像的 URL。

后端

控制器的后端代码：

@HttpCode(201)
@Get(':imageUrl')
@Header('Content-Type', 'image/png')
getFile(@Param('imageUrl')imageUrl: string) {
    imageUrl = atob(imageUrl);
    return fs.createReadStream(imageUrl);
}

前端

语言选择器ts代码：

currentLanguage: ApplicationLanguage;
availableLanguages: ApplicationLanguage[];

constructor(private readonly _languageProvider: CultureProviderService,
          private readonly _imageLoader: ImageService) {
    this.currentLanguage = _languageProvider._currentLanguage;
    _languageProvider.languageChanged.subscribe(
      newLanguage => {
        this.currentLanguage = newLanguage;
      }
    )
}
ngOnInit(): void {
    this._languageProvider.getAllAvailableLanguages().subscribe(
      (languages: ApplicationLanguage[]) => {
        this.availableLanguages = languages;
        languages.forEach((language: ApplicationLanguage) => {
          this._imageLoader.getImage(language.flagIcon).subscribe(
            imgBlob => {
              this._imageLoader.createImageFromBlob(imgBlob).then(
                result => {
                  language.image = result;
                },
                err => {
                  console.log(err);
                }
              )
            }
          );
        });
      },
      err => {
        console.log(err);
      }
    );
}

检索图像的服务：

constructor(private readonly _http: HttpClient,
          private domSanitizer: DomSanitizer) { }

getImage(imageUrl: string): Observable<Blob> {
    return this._http.get(`${environment.machineServerUrl}/file/${btoa(imageUrl)}`, { responseType: 'blob' });
}

createImageFromBlob(imageUrl: Blob): Promise<SafeUrl> {
    return new Promise<SafeUrl>((resolve, reject) => {
      const reader = new FileReader();
      reader.addEventListener(
        "load",
        () => {
          resolve(this.domSanitizer.bypassSecurityTrustUrl(reader.result as string));
        }
      );

      if (imageUrl) {
        reader.readAsDataURL(imageUrl);
      } else {
        reject();
      }
    });
}

HTML：

<div>
  <mat-selection-list (selectionChange)="changeLanguage($event)"
                      [multiple]="false">
    <mat-list-option  *ngFor="let language of availableLanguages"
                      [value]="language"  [selected] ="isSelected(language)">
      <img [src]="language.image" height="70px" width="70px" alt="Flag">
    </mat-list-option>
  </mat-selection-list>
</div>

我做错了吗？有什么遗漏吗？

编辑：

感谢接受的答案的解决方案

首先需要将nestjs版本升级到v8+：nest update --force。不幸的是，我的项目失败了，所以我删除了 dist、node_modules 和 package-lock.json，使用 CLI v8+ 创建了一个新的 nestjs 项目，并使用生成的 package.json 文件来升级项目。

然后，按照接受的答案中的建议更新控制器的代码以使用 StreamableFile：

@HttpCode(201)
@Get(':imageUrl')
@Header('Content-Type', 'image/png')
getFile(@Param('imageUrl')imageUrl: string): StreamableFile {
  imageUrl = Buffer.from(imageUrl, 'base64').toString();

  const file = createReadStream(imageUrl);
  return new StreamableFile(file);
}

官方资源：https://docs.nestjs.com/techniques/streaming-files

Answer 1

如果你要返回一个流，你需要做类似的事情

@HttpCode(201)
@Get(':imageUrl')
@Header('Content-Type', 'image/png')
getFile(@Param('imageUrl')imageUrl: string, @Res() res: e.Response) {
    imageUrl = atob(imageUrl);
    return fs.createReadStream(imageUrl).pipe(res);
}

如果您使用的是 Nest v8，则可以使用 StreamableFile 并执行类似的操作

@HttpCode(201)
@Get(':imageUrl')
@Header('Content-Type', 'image/png')
getFile(@Param('imageUrl')imageUrl: string, @Res() res: e.Response) {
    imageUrl = atob(imageUrl);
    return new StreamableFile(fs.createReadStream(imageUrl));

Nest 会在后台为您调用.pipe(res)