angularimagepipe

How to load images with JWT Authorization in the header in Angular 16?

I have implemented authentication with JWT token. And API calls are working properly by using auth intercepter. But there occurs unauthenticated error while load images from backend. I want to fix this issue with specific pipe. I searched solutions but all are not working for me. How to implement in Angular 16?

I implemented authentication in Angular with JWT token, and expected all images are also loaded successfully. But 401 error is occurred while loading images from Backend. Because there is no Authorization Key in HTTP header for image fetching.

Solution

  • I resolved this issue by utilizing cacheStorage. Since browser image caching can't use authentication header, I implemented manual image caching logic(set/get/remove) with service, and it worked for me well.