Img src路径与头参数传递
Img src path with header params to pass
我在jsp页面中有一个img标记,其中src路径需要传递头部参数以获取图像。我们如何实现它?
您现在可以使用fetch()来添加您的标题,然后将结果加载到<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/en-US/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data
如何将uint8数组转换为base64编码字符串?
您不能使用img标签访问header参数,您有两种解决方案:
使用带有header参数的Ajax请求并加载图像数据
<img src="data:image/png;base64,[CODE-OF-THE-IMAHE]">
使用带有令牌的GET参数来替换此功能的标头
<img src="controller?token=[TOKEN]">
您可以使用以下丑陋的内联hack
<img src onerror="fetch('https://picsum.photos/200',{headers: {hello:'World!'}}).then(r=>r.blob()).then(d=> this.src=window.URL.createObjectURL(d));" />
相关文章:
- 函数未将值作为参数传递
- 如何将参数传递到angularJs中的工厂
- 如何在HTML元素上创建函数,而不是将元素作为参数传递
- JavaScript常量-作为参数传递或直接使用
- 如何将javascript对象作为参数传递到c#web服务中
- 将参数传递给函数
- 如何将Gruntfile.js中的参数传递到webdriverio规范
- javascript,将参数传递给函数内部的闭包中的回调
- Javascript-将包含变量的html字符串作为参数传递
- 将字符串作为参数传递给函数onclick event jquery
- 将修改后的数组作为参数传递给函数
- 在嵌套递归指令中将参数传递给父控制器方法
- each()-将额外的参数传递给回调参数
- 代码气味-将布尔控制参数传递给函数
- 如何将自定义参数传递到FullCalendar事件提要
- 将参数传递给函数,同时保留事件处理程序
- 将图标作为参数传递不会;t工作-谷歌地图
- 如何使用按钮将参数传递给函数
- 将铁路由器参数传递给路径帮助程序
- Img src路径与头参数传递