Img src路径与标题参数传递

我在jsp页面中有一个img标记，其中src路径需要传递头参数来获取图像。 我们怎样才能实现它？

Answer 1

首先，您需要创建一个设置标头的ajax请求。 然后，您需要使用一些HTML5 API将收到的二进制数据转换为base64。 最后，使用data: protocol和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编码字符串？

Answer 2

您无法使用img标签访问标题参数，您有两个解决方案：

使用带有标头参数的Ajax请求并加载图像数据

将GET参数与令牌一起使用以替换此function的标头

Answer 3

您现在可以使用fetch（）添加标头，然后将结果加载到 ：

 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); });