Greetings to my fellow Stackoverflow-Users,
Lately, I was tasked with the requirement of loading images dynamically from the backend into my application. Up until now, it was always assumed that we would only be dealing with SVG images since there was no clarification in the documentation or any other source. This assumption made things easier for me as I had a basic understanding of how to handle SVG images.
getGmaLogo(gmaId) {
this.httpClient.get(ApiUrls.QA_GMA_LOGO + "/" + gmaId, { headers: this.authHeader, responseType: "text" })
.pipe(catchError(error => {
// These error messages are tailored by me
this.errorService.showError(error);
return this.errorService.handleError(error);
}))
.subscribe(image => {
let base64EncodedString = window.btoa(image)
this.gmaLogo = this.sanitizer.bypassSecurityTrustResourceUrl('data:image/svg+xml;base64,' + s);
})
}
I then displayed the image on my page using the following code.
<img [src]="gmaService.gmaLogo || ''" alt="Company Name"/>
However, things are never as straightforward as they seem, are they?
It turns out that I may receive jpeg, png, and various other formats instead of just SVG. It seems inconvenient to restrict users to only SVG icons. This brings me to my question... Is there a way to dynamically determine the type of data received in the response without explicitly setting a specific response type in the headers? Simply leaving it blank doesn't work because the default response type is JSON.