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

I'm late here, but you can do this with XMLHttpRequest and a blob.

var xhr = new XMLHttpRequest(); xhr.responseType = 'blob'; //so you can access the response like a normal URL xhr.onreadystatechange = function () {     if (xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {         var img = document.createElement('img');         img.src = URL.createObjectURL(xhr.response); //create <img> with src set to the blob         document.body.appendChild(img);     } }; xhr.open('GET', 'http://images.example.com/my_secure_image.png', true); xhr.setRequestHeader('SecretPassword', 'password123'); xhr.send(); 

If you want, you could check to make sure the blob's MIME type is an image.