Authorization header in img src link

Issue

I have a API that uses JWT for authentication. I am using this API for a Vue app. I am trying to display an image in the app using

<img src="my/api/link" />

But the API expects Authorization header with JWT in it.

Can I add headers to browser request like this?

Is there any way around it (using JS) or should I change the API itself?

Solution

You can not perform authentication on images which are directly used as href in img tag. If you really want this type of authentication on your images, then it's better to fetch them using ajax and then embed in your html.

Answered By - Tapas