如何使用 API 在我的后端訪問我的 angular 前端圖像

Question

我有一個 Angular 前端，我想訪問后端中的圖像。 所以我創建了 web 服務，並通過了安全認證；

//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 錯誤類型錯誤：無法讀取未定義的屬性“文件”

Console.log "getAllParam()

參數-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-mvwvU0tMY18ENvBEPKRFRLGGZ7

Answer 1

我通過允許所有人的網絡服務解決了這個問題。

這不是最好的解決方案，而是主要組件，我應該將登錄作為主要組件。