Задайте настраиваемый заголовок для запроса, сделанного из тега <img/>

Ответ 1

Вы не можете изменить HTTP-запрос браузера для ресурсов, загружаемых тегом <img>. Независимо от того, что вы пытаетесь сделать, вам нужно будет найти альтернативный подход.

Например, вы можете проксировать запрос через свой собственный сервер и изменять заголовки там. Или вы можете параметризовать URL-адрес ресурса с помощью строки запроса.

Как указывает Алекс, вы также можете использовать объект XmlHTTPRequest для загрузки данных изображения и использования функции setRequestHeader, хотя я подозреваю, что вы ограничены в том, какие заголовки вы можете установить (я сомневаюсь, что вы можете обманывать реферера или агента пользователя для например, хотя я не тестировал это).

Ответ 2

Я опаздываю здесь, но вы можете сделать это с помощью XMLHttpRequest и 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();

Если вы хотите, вы можете проверить, чтобы тип изображения MIME был выбран.