Img src path with header params to pass
Solution 1
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?
Solution 2
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);
});
Solution 3
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]">
Solution 4
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));" />
Related videos on Youtube
Arjun
Updated on March 18, 2020Comments
-
Arjun about 4 years
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?
-
Roy Iacob about 10 yearsIf 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).
-
Ayman Safadi about 10 yearsWhy does the image require header parameters to work?
-
Ayman Safadi about 10 yearsBTW, people complaining about the lack of code, I'm not sure it would be helpful given the question. At least not yet.
-
-
jlyonsmith almost 7 yearsYour idea about adding the token as a param was spot on. Thanks!
-
DankMemes over 6 yearsThe 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 has become standard, so you can use that instead of data urls now for better performance.
-
Lee Brindley almost 3 yearsSending a token in the URL is bad practice.
-
Ward D.S. about 2 yearsAs 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