带有要传递的标头参数的 Img src 路径答案

【问题标题】：Img src path with header params to pass带有要传递的标头参数的 Img src 路径
【发布时间】：2014-06-29 20:52:12
【问题描述】：

我在 jsp 页面中有一个 img 标签，其中 src 路径需要通过标头参数来获取图像。我们如何实现它？

【问题讨论】：

如果您发布了一些代码，我相信我可以引导您朝着正确的方向前进（最好是标记以及 jsp 页面中的函数）。
为什么图片需要header参数才能工作？
顺便说一句，人们抱怨缺少代码，我不确定这个问题是否会有所帮助。至少现在还没有。

【解决方案1】：

首先，您需要发出一个设置标头的 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

How to convert uint8 Array to base64 Encoded String?

【讨论】：

我注意到的唯一性能影响是打开 devtools 时（因为 base64 数据 url 可能很大）。但是，由于这个答案 blob api 已成为标准，因此您现在可以使用它而不是数据 url 以获得更好的性能。

【解决方案2】：

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

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

<img src="data:image/png;base64,[CODE-OF-THE-IMAHE]">

使用带有令牌的 GET 参数来替换此功能的标头

<img src="controller?token=[TOKEN]">

【讨论】：

您关于将令牌添加为参数的想法是正确的。谢谢！
在 URL 中发送令牌是不好的做法。

【解决方案3】：

您现在可以使用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);
});

【讨论】：

【解决方案4】：

您可以使用以下丑陋的内联技巧

&lt;img src onerror="fetch('https://picsum.photos/200',{headers: {hello:'World!'}}).then(r=&gt;r.blob()).then(d=&gt; this.src=window.URL.createObjectURL(d));" /&gt;

【讨论】：