尝试使用 angular UI 执行获取请求时出现 base 64 图像未定义错误

Question

我有一个简单的 UI，当用户输入名称并按下按钮时，会发送一个获取请求，我希望在浏览器中呈现该获取请求中的图像。但是，该图像未被渲染。下面是我的UI：

按下按钮时，控制台出现以下错误：

GET data:image/jpeg;base64,undefined net::ERR_INVALID_URL

下面是我的组件文件：

@Component({
  selector: 'home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class HomeComponent implements OnInit {

  data:any
  image:any
  retrievedImage: any;
  base64Data: any;
  retrieveResonse: any;
  imageName:any;

  constructor(private imageData:imageService,
              private httpClient:HttpClient) { }

  ngOnInit(): void {

    console.log(this.image)
   

    this.imageData.getImages().subscribe((results)=>{
     console.log(results)
     this.data = results
     })
  }

  getImage2() {
    //Make a call to Sprinf Boot to get the Image Bytes.
    this.httpClient.get('http://localhost:8080/get/' + this.imageName,
      {responseType:'blob'})
      .subscribe(
        res => {
          this.retrieveResonse = res;
          this.base64Data = this.retrieveResonse.picByte;
          this.retrievedImage = 'data:image/jpeg;base64,' + this.base64Data;
        }
      );
  }
}

下面是我的 HTML 文件：

<p>
    <mat-toolbar>
      <span>Image Repository</span>
    </mat-toolbar>
  </p>
<button mat-button style="position:relative; left: 5px; top:2px" (click)="getImage2()">Get an image </button>
<input #image type="text" style="position:relative;left:10px; top: 2.99px" [(ngModel)]="imageName">


<!-- <img *ngIf="image" style="position:relative;top:200px" [src]="image" alt="Place image title"> 
 -->
<div class="container row">
  <div class="col-md-12">
      <div *ngIf=retrievedImage>
          <img [src]="retrievedImage" style="position:relative;top:200px" src="data:image/png;base64,{{image}}">
      </div>
  </div>
</div>

我该如何解决这个错误？我不确定为什么图像会未定义。

编辑：看起来 this.base64data 变量显示为未定义，但我不确定为什么

Answer 1

如评论中所述，响应只是字节。在这种情况下，我相信您可以在 img.src.

中使用端点 URL

export class HomeComponent implements OnInit {

  imageUrl: string;

  getImage2() {
    //Update the image url
    this.imageUrl= 'http://localhost:8080/get/' + this.imageName;
  }
}

<div class="container row">
  <div class="col-md-12">
      <div *ngIf=retrievedImage>
          <img [src]="imageUrl" style="position:relative;top:200px" src="data:image/png;base64,{{image}}">
      </div>
  </div>
</div>

尝试使用 angular UI 执行获取请求时出现 base 64 图像未定义错误

base 64 image undefined error when trying to perform get request with angular UI

angular

image

get

base64

undefined