31

I have an img tag in jsp page where the src path requires header parameters to pass to get the image. How can we achieve it?

Kamil Kiełczewski
  • 85,173
  • 29
  • 368
  • 345
Arjun
  • 545
  • 1
  • 6
  • 17

4 Answers4

45

You can now use fetch() to add your headers and then load the result into an <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);
});
Mickäel A.
  • 9,012
  • 5
  • 54
  • 71
20

First, you'll need to make an ajax request that sets the headers. Then, you need to use some HTML5 APIs to convert binary data recieved to base64. Finally, set the image src with the data: protocol and your base64 data.

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

How to convert uint8 Array to base64 Encoded String?

Community
  • 1
  • 1
DankMemes
  • 2,085
  • 2
  • 21
  • 30
  • The only performance impact I've noticed is when opening devtools (because the base64 data url can be big). However, since this answer the [blob api](https://developer.mozilla.org/en-US/docs/Web/API/Blob) has become standard, so you can use that instead of data urls now for better performance. – DankMemes Jan 18 '18 at 15:39
9

You can't access to the header params with the img tag, you've got two solutions :

Use an Ajax request with the header param and load the image data

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

Use GET parameters with a token to replace the header for this functionality

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

Val Entin
  • 953
  • 10
  • 18
7

You can use following ugly inline hack

<img src onerror="fetch('https://picsum.photos/200',{headers: {hello:'World!'}}).then(r=>r.blob()).then(d=> this.src=window.URL.createObjectURL(d));" />
Kamil Kiełczewski
  • 85,173
  • 29
  • 368
  • 345
  • If the fetch fails wouldn't that lead to infinite onerror loop? – Dror Bar Jul 18 '22 at 10:50
  • @DrorBar probably `onerror` handler is executed only if errors occurs during load image using path given in src attribute (but I don't check this deeply). Code inside `onerror` not handle any future errors. – Kamil Kiełczewski Jul 18 '22 at 12:19
  • 1
    This code is using modern JavaScript features, so it may not work in older browsers. It is also worth noting that this approach may cause security concerns, as it allows executing arbitrary JavaScript code on an error event. – Siddharth Sogani Feb 02 '23 at 17:47