如何使用 API 在我的后端访问我的 Angular 前端图像答案

【问题标题】：How to access to my angular frontend image in my backend with API如何使用 API 在我的后端访问我的 Angular 前端图像
【发布时间】：2021-05-11 22:14:16
【问题描述】：

我有一个 Angular 前端，我想访问后端中的图像。所以我创建了网络服务，通过安全认证；

//AppParam{int id, AppFileInfo logo}
@GetMapping(value = "/allParam")
    public List<AppParam> getAllParams (){
        return paramsSiteService.findAllParam();
    }

// model 
export class ParamSite {
    public id: string;
    public file;
    constructor(file) {
      this.file = file;
    }
  }

//service
@Injectable({
  providedIn: 'root'
})
export class ParamSiteService {
  host: string;
  headers;

  constructor(private http: HttpClient, private authService: AuthentificationService, private appConfigService: AppConfigService) {
    this.headers = new HttpHeaders({'authorization': this.authService.jwt});
    this.host = this.appConfigService.getMyUrl();
  }
...
getAllParam(): Observable<any> {
    console.log(this.host);
    console.log(this.headers);
    console.log(this.authService.jwt);
    return this.http.get(this.host + "/allParam", {headers: this.headers})
    .pipe(catchError((error: any) => {
      console.log(error); 
      return Observable.throw(error);}
      ));;
  }

//html
<img  src={{logo.file}} alt="" width="50">

// ts
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  showFiller: boolean;
  logo ;

  constructor(private authService: AuthentificationService, private router: Router,
     private frontDynamic: FrontDynamicService,private cdRef:ChangeDetectorRef
     ,private paramSiteService: ParamSiteService) {
  }

 ngOnInit(): void {
    this.authService.loadToken();
    this.getLogo();
  }
  ngAfterViewChecked(){
    this.cdRef.detectChanges();
  }
  ngOnDestroy(): void {
    this.onLogOut()
  };
  onLogOut() {
    return this.authService.logout()
  }
 public getLogo(){
    this.paramSiteService.getAllParam().pipe(take(1)).subscribe(param => {
      this.logo = param;
      console.log(param);
    },
    error => console.log(error)
  );
  }
...
}

控制台浏览器

core.js:4081 ERROR TypeError: Cannot read property 'file' of undefined

Console.log "getAllParam()

param-site.service.ts:35 http://localhost:8082

param-site.service.ts:36 HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ} param-site.service.ts:37

承载 eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJCZXJuYXJkIiwicm9sZSI6WyJBRE1JTiJdLCJpc3MiOiIvbG9naW4iLCJleHAiOjE2MTI4ODI2NDV9.GO-mvwvg_nZ8S

【问题讨论】：

标签： javascript java angular

【解决方案1】：

我已经通过允许所有人的网络服务解决了这个问题。

这不是最好的解决方案而是主要组件，我应该将登录作为主要组件。

【讨论】：