javascript - Set custom header for the request made from <img/> tag

Question

Let's say I have a code like this:

<img src='images/whatever.jpj' width='' height=''/>

How to configure custom headers for this request?

Will appreciate any help.

Answer 1

You cannot change the browser's HTTP request for resources loaded by the <img> tag. Whatever you are trying to do, you will need to find an alternative approach.

For example, you could proxy the request through your own server and modify the headers there. Or you could parametrise the URL of the resource with a query string.

As Alex points out, you may also be able to use an XmlHTTPRequest object to load the image data and use the setRequestHeader function, though I suspect you are limited in what headers you can set (I doubt you can spoof the referrer or user agent for example, though I haven't tested this).