Spring Boot+Angular9+JWT：从webapp/images获取图片显示异常求助

我来帮你拆解这三个问题的根源，一步步搞定图片显示的问题：

1. 解析错误：ERR_INVALID_URL & Unexpected token � in JSON at position 0 #

这俩错误本质是同一个问题：Angular默认会把HTTP响应当成JSON解析，但你的后端返回的是二进制图片数据，导致解析失败，最终imageUserProfile要么是undefined，要么是乱码的解析错误。

解决步骤： #

• 修改Angular Service，指定响应类型为blob：
  在请求时明确告诉Angular要接收二进制数据，不要自动解析JSON：

  getUserProfileImage(uid: string): Observable<Blob> {
      return this.http.get(`${this.baseUrl}/imageuserprofile/${uid}`, { responseType: 'blob' });
  }
  

• 在Component中把Blob转成可用于img标签的Data URL：
  使用浏览器的URL.createObjectURL()方法处理Blob，生成可直接绑定的图片地址：

  getImageUserProfile() {
      this.userProfileService
          .getUserProfileImage(this.userProfileUid)
          .subscribe((imageBlob) => {
              this.imageUserProfile = URL.createObjectURL(imageBlob);
          }, error => {
              console.error('图片加载失败:', error);
          });
  }
  
  // 组件销毁时记得释放URL对象，避免内存泄漏
  ngOnDestroy() {
      if (this.imageUserProfile) {
          URL.revokeObjectURL(this.imageUserProfile);
      }
  }
  

• 模板中直接绑定处理后的地址：

  <img class="profile-user-img img-responsive img-circle" [src]="imageUserProfile" alt="User profile picture" />
  

2. 权限错误：403 Forbidden #

这个是Spring Security的拦截规则导致的：你的图片接口被JWT认证拦截了，但直接通过img标签的src发起请求时，不会自动带上JWT Token，所以被拒绝访问。

解决步骤（二选一）： #

方案一：给图片接口放行（适合公开图片）

在Spring Security的配置类中，把图片接口加入白名单，不需要认证就能访问：

@Override
protected void configure(HttpSecurity http) throws Exception {
    http.csrf().disable()
        .authorizeRequests()
        // 放行图片获取接口
        .antMatchers("/userprofile/imageuserprofile/**").permitAll()
        // 其他需要认证的接口保持原有规则
        .anyRequest().authenticated()
        // 你的JWT过滤器配置...
        .and()
        .addFilter(new JwtAuthenticationFilter(authenticationManager()))
        .addFilter(new JwtAuthorizationFilter(authenticationManager()));
}

方案二：带Token请求（适合私有图片）

如果图片是用户私有资源，不能随便访问，就用第一个问题的解决方案：通过Angular Service发起请求（会自动带上你配置的JWT Token拦截器），拿到Blob后转成Data URL显示，这样既能保证权限验证，又能正常显示图片。

额外检查点 #

确认Spring Boot的图片路径是否正确：
有时候context.getRealPath("/Images/")可能因为打包或部署环境的问题指向错误路径，你可以换成绝对路径或者基于资源目录的读取方式：

// 比如读取resources/static/Images下的文件
return Files.readAllBytes(Paths.get("src/main/resources/static/Images/" + userProfile.getUrlImage()));

先通过Postman测试后端接口是否能正常返回图片（记得带上JWT Token），再调试Angular的部分，这样更容易定位问题~

内容的提问来源于stack exchange，提问作者Adenfr Aden