Javascript 带要传递的标头参数的Img src路径
我在jsp页面中有一个img标记,其中src路径需要传递头参数才能获取图像。我们如何实现它?首先,您需要发出一个ajax请求来设置标题。然后,您需要使用一些HTML5API将接收到的二进制数据转换为base64。最后,使用Javascript 带要传递的标头参数的Img src路径,javascript,ajax,prototypejs,Javascript,Ajax,Prototypejs,我在jsp页面中有一个img标记,其中src路径需要传递头参数才能获取图像。我们如何实现它?首先,您需要发出一个ajax请求来设置标题。然后,您需要使用一些HTML5API将接收到的二进制数据转换为base64。最后,使用数据:协议和base64数据设置图像src var oReq = new XMLHttpRequest(); oReq.open("GET", "yourpage.jsp", true); oReq.setRequestHeader("Your-Header-Here", "V
数据:
协议和base64数据设置图像src
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);
资料来源:
您无法使用img标签访问标题参数,您有两种解决方案: 使用带有header参数的Ajax请求并加载图像数据
使用带有令牌的GET参数替换此功能的标头
您现在可以使用添加标题,然后将结果加载到
中:
您可以使用以下丑陋的内联黑客
r.blob())。然后(d=>this.src=window.URL.createObjectURL(d));“/>
如果您发布了一些代码,我相信我可以引导您走向正确的方向(最好是jsp页面中的标记和函数)。为什么图像需要标题参数才能工作?顺便说一句,人们抱怨缺少代码,我不确定这是否会有帮助。至少还没有。你关于将令牌添加为参数的想法是正确的。谢谢!在URL中发送令牌是一种不好的做法。我注意到的唯一性能影响是在打开devtools时(因为base64数据url可能很大)。但是,由于此答案已成为标准答案,因此您现在可以使用它而不是数据url,以获得更好的性能。
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);
});