javascript - 显示来自 API 的图像

Question

我遇到了如何显示从后端 API 发送的图像的问题，它不显示。当我 console.log 时，我得到了这个错误。

这是我的代码供您引用。

HTML

<img [src]="imageToShow" style="width:100%;margin-left: -14px;">

组件

ngOnInit() {
  this.getBanner()
}

    getBanner() {
        this.bannerId = {
          confId: 1,
          type: "Banner",
        };
        this.httpService.getBanner(this.bannerId).subscribe(
          (baseImage: any) => {
            let objectURL = "data:image/jpeg;base64," + baseImage.image;
            this.imageToShow = this.sanitizer.bypassSecurityTrustUrl(objectURL);
          },
          (error) => {
            // this.isImageLoading = false;
            console.log(error);
          }
        );
      }

服务

public getBanner(data){
    console.log(data)
    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
        responseType: 'blob',
        Authorization: 'Bearer '+this.getToken()
      })
    };
    return this.httpClient.post((this.serverUrl + this.basePath + '/landing/conferenceitem'),data,httpOptions);
  }

edit

当我检查网络响应时，我得到了这张图片

Answer 1

试试这个

第 1 步

移除Content-Type header 并在httpOptions 中将responseType 设置为blob，但不是在header 部分像你一样。现在，您应该得到一个 blob 作为响应。之前，angular 试图将您的响应解析为 JSON，因此出现错误

public getBanner(data){
    console.log(data)
    const httpOptions = {
      headers: new HttpHeaders({
        Authorization: 'Bearer '+this.getToken()
      }),
       responseType: 'blob'
    };
    return this.httpClient.post((this.serverUrl + this.basePath + '/landing/conferenceitem'),data,httpOptions);
  }

步骤 #2 使用 baseImage 而不是 baseImage.image(响应是一个 blob，它没有 image 属性)，然后使用 createObjectURL 从 blob 中获取图像 url。像您一样清理该 URL

    this.httpService.getBanner(this.bannerId).subscribe(
      (baseImage: Blob) => {

       let objectURL = URL.createObjectURL(baseImage);       
        this.imageToShow = this.sanitizer.bypassSecurityTrustUrl(objectURL);

      },
      (error) => {
        // this.isImageLoading = false;
        console.log(error);
      }
    );