我在JSP页面上有一个img标签,其中src路径需要传递标题参数以获取图像。我们该如何实现?
我在JSP页面上有一个img标签,其中src路径需要传递标题参数以获取图像。我们该如何实现?
<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);
});
首先,您需要进行一个Ajax请求来设置标头。然后,您需要使用一些HTML5 API将接收到的二进制数据转换为base64格式。最后,使用data:
协议和您的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);
来源:
https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data
您无法使用img标签访问头部参数,有两个解决方案:
1. 使用带有头部参数的Ajax请求并加载图像数据
<img src="data:image/png;base64,[CODE-OF-THE-IMAHE]">
2. 使用GET参数和令牌替换此功能的头部
<img src="controller?token=[TOKEN]">
<img src onerror="fetch('https://picsum.photos/200',{headers: {hello:'World!'}}).then(r=>r.blob()).then(d=> this.src=window.URL.createObjectURL(d));" />
onerror
处理程序(但我没有深入检查)。onerror
内部的代码不处理任何未来的错误。 - Kamil Kiełczewski