Img src chemin de l'en-tête paramètres de passer

J'ai une balise img dans la page jsp où la src chemin, il faut l'en-tête paramètres à passer pour obtenir l'image. Comment pouvons-nous y parvenir?

Si vous avez posté un code, je suis sûr que je pourrais vous orienter dans la bonne direction (idéalement, le <img> tag ainsi que la fonction dans la page jsp).
Pourquoi l'image nécessitent des paramètres d'en-tête de travail?
BTW, les gens se plaignent du manque de code, je ne suis pas sûr qu'il serait utile en raison de la question. Au moins pas encore.

OriginalL'auteur Arjun | 2014-05-12

  1. 7

    Tout d'abord, vous aurez besoin de faire une requête ajax qui définit les en-têtes. Ensuite, vous devez utiliser un Api HTML5 pour convertir des données binaires reçu en base64. Enfin, l'image src avec le data: protocole et vos données base64.

    var oReq = new XMLHttpRequest();
oReq.open("GET", "yourpage.jsp", true);
oReq.setRequestHeader("Your-Header-Here", "Value");
//use multiple setRequestHeader calls to set multiple values
oReq.responseType = "arraybuffer";
oReq.onload = function (oEvent) {
  var arrayBuffer = oReq.response; //Note: not oReq.responseText
  if (arrayBuffer) {
    var u8 = new Uint8Array(arrayBuffer);
    var b64encoded = btoa(String.fromCharCode.apply(null, u8));
    var mimetype="image/png"; //or whatever your image mime type is
    document.getElementById("yourimageidhere").src="data:"+mimetype+";base64,"+b64encoded;
  }
};
oReq.send(null);

    Sources:

    https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data

    Comment convertir uint8 Tableau de Chaîne Encodée en base64?

    Quelle en sera l'incidence sur les performances d'une page web?
    Le seul impact sur les performances que j'ai remarqué, c'est lors de l'ouverture de devtools (parce que les données base64 url peut être grand). Cependant, depuis cette réponse de la blob api est devenu un standard, de sorte que vous pouvez l'utiliser à la place de données url désormais pour de meilleures performances.

    OriginalL'auteur DankMemes

  2. 6

    Vous pouvez maintenant utiliser fetch() pour ajouter vos en-têtes, puis charge le résultat dans un <img>:

    const src = 'https://api.mywebsite.com/profiles/123/avatar';
const options = {
  headers: {
    'Some-Header': '...'
  }
};

fetch(src, options)
.then(res => res.blob())
.then(blob => {
  imgElement.src = URL.createObjectURL(blob);
});

    OriginalL'auteur flawyte

  3. 4

    Vous ne pouvez pas accéder à l'en-tête params avec la balise img, vous avez deux solutions :

    Utiliser une requête Ajax avec l'en-tête param et de charger les données d'image

    <img src="data:image/png;base64,[CODE-OF-THE-IMAHE]">

    Utiliser les paramètres GET avec un jeton de remplacer l'en-tête de cette fonctionnalité

    <img src="controller?token=[TOKEN]">

    Votre idée sur l'ajout du jeton comme un param étais sur place. Merci!

    OriginalL'auteur Val Entin