How to retrieve and display an image from a backend API in Angular

Frontend and Backend Development
1

I’ve been trying to show an image in Angular version 10, fetching it from a backend service, but I keep encountering an error preventing the image from displaying. I’ve searched for solutions but haven’t found anything effective. Could anyone offer guidance on resolving this issue?

Backend:

 getImage: async (req, res, next) => {
    Image.fetchAll().then(result => {
        res.send(result);
    });
}

API Route:

router.get('/retrieve_image', uploadHandler.getImage);

Angular Frontend - Service.ts:

fetchFile(): Observable<any> {
    return this.http.get(apiUrl + '/retrieve_image', { responseType: 'Blob' as 'json' });
}

Angular Code:

transformBlobToImage(blob: Blob) {
    const fileReader = new FileReader();
    fileReader.addEventListener('load', () => {
        this.imageDisplay = fileReader.result; // the resulting image data
    }, false);

    if (blob) {
        fileReader.readAsDataURL(blob);
    }
}

fetchImage(): void {
    this.fileService.fetchFile().subscribe(response => {
        this.transformBlobToImage(response);
    });
}

HTML:

<img [src]='imageDisplay' />

Error Encountered:

A significant error has appeared:

unsafe:data:application/json;base64, [...] several characters that are unclear

MySQL image table example

2

Have you checked the image format? I’m wondering if the backend might be sending an unexpected type or data that the frontend isn’t handling correctly. Also, have you tried logging the blob to inspect the content? Might help reveal something. Could the base64 conversion somehow go wrong here?

3

maybe the issue is with the ‘responseType’ in your service.ts. Try changing ‘Blob as json’ to just ‘blob’. Also, ensure ur backend sends the right Content-Type headers. I had a simlar problem and fixing these helped. good luck!

4

Hey, has anyone experimented with caching the image data on the frontend? Maybe leveraging a service worker or local storage could prevent repeated fetches in testing and help isolate the problem. Have you tried a tool like Postman to manually inspect the backend response first? :mag::camera_flash:

5

It seems that the issue might be related to the Angular security context, which can sometimes misinterpret blob URLs as unsafe. Consider using Angular’s DomSanitizer to bypass this security warning. You can inject DomSanitizer in your component and then sanitize the URL like this:

constructor(private sanitizer: DomSanitizer) {}

sanitizeImage(imageData) {
  return this.sanitizer.bypassSecurityTrustUrl(imageData);
}

fetchImage(): void {
  this.fileService.fetchFile().subscribe(response => {
    const unsafeImageUrl = this.transformBlobToImage(response);
    this.imageDisplay = this.sanitizeImage(unsafeImageUrl);
  });
}

Using DomSanitizer can effectively resolve this issue, ensuring your images are safely displayed on the page.

6

Maybe check if the backend is setup to send the image in the right binary format? Different dbs send blob data differently, like as base64 or line encoding issues. Sometimes it’s easy to miss such details when setting up RESTful endpoints. :thinking::computer: