Search code examples
javascripthtmljwt

Authorization header in img src link

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 src 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.