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?
3
-
If you posted some code, I'm sure I could steer you in the right direction (ideally the <img> tag as well as the function in the jsp page).Roy Iacob– Roy Iacob2014-05-12 13:11:11 +00:00Commented May 12, 2014 at 13:11
-
Why does the image require header parameters to work?Ayman Safadi– Ayman Safadi2014-05-12 13:34:23 +00:00Commented May 12, 2014 at 13:34
-
BTW, people complaining about the lack of code, I'm not sure it would be helpful given the question. At least not yet.Ayman Safadi– Ayman Safadi2014-05-12 13:35:38 +00:00Commented May 12, 2014 at 13:35
Add a comment
|
4 Answers
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);
});
2 Comments
denpost
Finally I found this! This works perfectly fine and fast. All other methods based on XMLHttpRequest or converting the bytes of image to Base64 to are too slow for my needs. Note that 'fetch()' perfectly sends parallel requests like a regular <img src="..."> does, while XMLHttpRequest is limited in parallelism and makes the images to wait in queue. Thanks so much!
Jiří
The MDN docs says that you should also free the object URL using
URL.revokeObjectURLFirst, 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
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]">
4 Comments
jlyonsmith
Your idea about adding the token as a param was spot on. Thanks!
Lee Brindley
Sending a token in the URL is bad practice.
Ward D.S.
As a url parameter should really be extremely last resort, it is bad practice as it can expose the token through browser history, referrer header etc
Nick Hingston
Also you'll lose the browser cached image every time your token changes - which should be often...
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));" />
answered Mar 17, 2020 at 17:41
Kamil Kiełczewski
93.6k34 gold badges401 silver badges375 bronze badges
3 Comments
Dror Bar
If the fetch fails wouldn't that lead to infinite onerror loop?
Kamil Kiełczewski
@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.
Siddharth Sogani
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.