Set intestazione personalizzata per la richiesta fatta da <img/> tag

Question

Diciamo che ho un codice come questo:

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

Come configurare intestazioni personalizzate per questa richiesta?

apprezzeranno alcun aiuto

Answer 1

Non è possibile modificare richiesta HTTP del browser per le risorse caricate dal tag <img>. Qualunque cosa tu stia cercando di fare, dovrai trovare un approccio alternativo.

Ad esempio, è possibile inoltrare la richiesta tramite il proprio server e modificare le intestazioni. Oppure puoi parametrizzare l'URL della risorsa con una stringa di query.

Come Alex fa notare, si può anche essere in grado di utilizzare un oggetto XmlHTTPRequest per caricare i dati di immagine e utilizzare la funzione setRequestHeader, anche se ho il sospetto che si sono limitati in ciò che le intestazioni è possibile impostare (dubito che si possa falsificare il referrer o user agent, ad esempio, sebbene non l'abbia ancora provato).

Answer 2

Sono in ritardo qui, ma è possibile farlo con XMLHttpRequest e un 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(); 

Se lo si desidera, è possibile verificare che il tipo MIME del blob sia un'immagine.