Angular 角度http响应作为错误参数，即使状态为200

所以我试图从我的spring boot后端执行一个“GET”请求，我收到了响应，但图片显示的是错误参数。我可以使用error参数并使用网站上的图片，但即使状态为200，我仍然会得到error

后端代码：

@CrossOrigin(origins="http://localhost:4200")
@GetMapping(
  path = "/images/path-variable/{name}"
)
static public ResponseEntity<String> getImageWithMediaType(@PathVariable String name) throws IOException, Exception {
    System.out.println("/images/" + name + ".jpg");
    File tempFile = new File("/home/ninhow/Desktop/antons-skafferi-front-back/backend/src/main/resources/images/restaurant_1280x853.jpg");

    return ResponseEntity.ok(CodecBase64.encode(tempFile, true));
}

基本上，我正在尝试从后端发送一张图片，以便在前端使用时不会出错：

组件的html文件：

<p>header works!</p>
<div>
   <img [src]="image" alt="">
</div>

---

因此，在上述评论的帮助下，我找到了解决问题的方法。 因此，解决方案的第一部分是将我的

getImage（）

函数中的get重载更改为：

getImage(){
    return this.http.get("http://localhost:8080/images/path-variable/restaurant_1280x853", {
      responseType: "text"
   });
}

我必须添加一个

responseType:“text”

作为选项，因为它需要一个json，并且接收一个base64字符串

后来我遇到了一个问题：

我的解决方案是添加

”数据：image/jpg；base64，“

对于消毒剂，我还不知道为什么这样做有效，但它解决了问题。我最好的猜测是，我告诉标题它是base64字符串

最终功能：

  getHeaderImage(){
    this.service.getImage().subscribe(data => {
      this.image = this.sanitizer.bypassSecurityTrustResourceUrl('data:image/jpg;base64,' + data);    
    }, error=>{
    console.log(error);
    });
  }

我的页面在开始时加载了一个空结果，我不明白该函数是如何在

ngOnInit（）

上调用的，我的解决方案是将

*ngIf=“image”

添加到html文件中，我的基本意思是：如果加载了图像，则使用源代码，否则。。。不要

最终html：

<div>
    <img *ngIf="image" [src]="image">

</div>

读取错误消息。它能告诉你出了什么问题。HttpClient试图将base64文本标记为JSON，因为您没有使用正确的get（）重载。我应该在我的服务上添加getImage函数的选项吗？是的。您希望使用返回可观察值的重载。在文档中找到它，并传递选择此重载所需的选项。因此，我解决了错误，但我得到了新错误，我在响应中得到了base64。。。唯一的问题是我得到了“net:：ERR_CONNECTION_RESET 431（Request Header Fields Too Large）”。对于每个询问错误的问题，您都需要提供相关的代码、准确完整的错误消息/堆栈跟踪，并告知此错误出现的时间、地点和方式。

getImage(){
    return this.http.get("http://localhost:8080/images/path-variable/restaurant_1280x853", {
      responseType: "text"
   });
}

  getHeaderImage(){
    this.service.getImage().subscribe(data => {
      this.image = this.sanitizer.bypassSecurityTrustResourceUrl('data:image/jpg;base64,' + data);    
    }, error=>{
    console.log(error);
    });
  }

<div>
    <img *ngIf="image" [src]="image">

</div>