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', uploadController.getImage);

Angular Frontend - Service:

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

Image Handling 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);
    }
}

retrieveImage(): void {
    this.fileService.fetchImage().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 tried setting the unsafe-eval in angular sanitizer? Sometimes, the Angular sanitizer blocks the image if it thinks it’s unsafe. You can try bypassing it temporarly for testing by using DomSanitizer.bypassSecurityTrustUrl method, tho be careful using this in production apps! might solve thge issue :crossed_fingers:

3

Maybe there’s an issue with the responseType setting in your fetchImage(). What happens if you explicitly set responseType: 'blob' instead of 'Blob' as 'json'? Do you see any change? Also, have you checked if the backend is correctly returning the image as a Blob? :thinking:

4

Another thing you might want to check is how the backend is sending the image data. Ensure that the image files you are fetching are served correctly with the appropriate MIME type (e.g., image/jpeg or image/png). This can be achieved by setting the appropriate res.set('Content-Type', 'image/jpeg') in your backend code before sending the image response. Additionally, inspect the network tab in your browser’s developer tools to verify that the API call is returning the desired image format and size.

5

In your case, it’s worth checking the configuration of the Angular development environment, particularly focusing on cross-origin resource sharing (CORS) issues. Occasionally, these settings can restrict image data from being properly rendered in the front-end if the backend is hosted on a different domain or port. Ensure the backend API enables CORS for your Angular application. Additionally, test by loading the image URL directly in the browser to see if the data serves correctly, which helps identify if the problem lies within the Angular setup or the backend.