如何解决Angular+Java项目中图片资源的控制台404错误？

这个问题的核心在于无效的图片请求已经发起，且后端返回的状态/内容不符合浏览器对图片资源的预期，导致控制台报错。结合你提供的代码，我们可以从后端和前端两个层面优化来彻底消除这个问题：

一、后端代码优化：正确处理文件不存在的情况 #

当前你的后端在文件不存在时返回200 OK+空body，浏览器请求图片资源时收到空内容，会判定为无效图片并抛出错误。我们需要改为返回404 Not Found，让前端能明确识别文件不存在的状态：

修改getFile方法：

@GetMapping("/files/{filename:.+}")
@ResponseBody
public ResponseEntity<Resource> getFile(@PathVariable String filename) {
    if(filename != null) {
        Resource file = customerController.loadFile(filename);
        if(file != null) {
            return ResponseEntity.ok()
                .header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + file.getFilename() + "\"")
                .body(file);
        } else {
            // 文件不存在时返回404，而不是200+空body
            return ResponseEntity.notFound().build();
        }
    } else {
        return ResponseEntity.notFound().build();
    }
}

loadFile方法可以保持不变，它已经正确返回null标识文件不存在。

二、前端代码优化：避免无效请求+简化逻辑 #

当前前端的getLogos方法存在两个问题：一是用GET请求图片并尝试解析为JSON（这完全错误，图片是二进制资源），二是错误的错误处理逻辑导致无效URL仍然被绑定到img标签。我们可以改为用HEAD请求检查文件是否存在（更高效，无需下载整个图片），并简化模板逻辑：

修改Component.ts的getLogos方法 #

getLogos(customer){
  let fileName = customer.customerLogoPath;
  if(fileName != null && fileName != undefined && fileName != 'null'){
    const imageUrl = `${this.apiEndPoint}${fileName}`;
    // 用HEAD请求检查文件是否存在，仅获取响应头，不下载图片内容
    this.http.head(imageUrl, { observe: 'response' })
      .subscribe({
        next: (response) => {
          // 请求成功，文件存在，绑定正确的图片URL
          customer.customerLogoPath = imageUrl;
        },
        error: (err) => {
          // 任何错误（包括404）都设置为替代图片
          customer.customerLogoPath = '/assets/images/no-img.png';
        }
      });
  } else {
    customer.customerLogoPath = '/assets/images/no-img.png';
  }
}

简化Component.html模板 #

无需冗余的*ngIf判断，直接用Angular的默认值语法处理空值情况：

<div class="row">
  <div class="box-ctn-img col-3 mx-auto text-center" style="margin-right: 25px;">
    <img [src]="customer?.customerLogoPath || '/assets/images/no-img.png'" 
         class="rounded mx-auto d-block img-fluid">
  </div>
  <div class="box-ctn-dic col-9">
    <h4>[ {{customer.customerCode}} ] - <span>{{customer.customerName}}</span></h4>
    <h3><span>{{customer.defaultWarehouse?.name}}</span></h3>
    <h3><span>{{customer.dept?.deptName}}</span></h3>
  </div>
</div>

三、优化后的流程说明 #

1. 前端收到客户数据后，先判断logo路径是否有效；
2. 用HEAD请求后端检查文件是否存在：
   • 如果存在，将完整的API URL绑定到customer.customerLogoPath，img标签加载正确的图片；
   • 如果不存在（返回404），直接设置为本地替代图片路径，img标签加载本地资源，不会发起无效请求；
3. 后端明确返回404状态，前端无需处理无效的空内容响应，彻底消除控制台的404错误。

内容的提问来源于stack exchange，提问作者Ruchi Shah