Currently, I am developing an angular application with ng9.
I have a specific div where I need to display an avatar using an image fetched from the API in my component.ts file:
....
export class HomeComponent implements OnInit {
nextLaunch$: Observable<SpacexNext>;
panelOpenState: true;
search = '';
constructor(
private spacexService: SpacexService,
private sanitizer: DomSanitizer
) { }
ngOnInit(): void {
this.nextLaunch$ = this.spacexService.getNextLaunch();
}
...
In the .html file:
<div mat-card-avatar *ngIf="(nextLaunch$ | async)?.links?.patch?.small !== null" [style.backgroundImage]="'url('+(nextLaunch$ | async)?.links?.patch?.small+')'" class="example-header-image">
</div>
The avatar displays correctly without any issues, but I keep encountering an error in the browser console:
GET http://localhost:4200/null 404 (Not Found)
Do you have any suggestions on how to resolve this error?
Additional Information
The API functions as expected and returns data properly. The avatar image shows up without any trouble. My main concern is addressing the error message that pops up in the browser console. I did some research and found that the issue could be related to the async pipe, but I personally prefer it over the subscribe method.
Thanks in advance.