使用带有标题参数的图像源路径进行传递

Question

我在JSP页面上有一个img标签，其中src路径需要传递标题参数以获取图像。我们该如何实现？

- Arjun

---

如果您发布了一些代码，我相信我可以为您指引正确的方向（最好包括jsp页面中的<img>标签和函数）。 - Roy Iacob

为什么图像需要头部参数才能工作？ - Ayman Safadi

顺便说一句，那些抱怨缺乏代码的人，我不确定在这个问题上提供代码是否有帮助。至少现在还不行。 - Ayman Safadi

Answer 1

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

- Mickäel A.

Answer 2

首先，您需要进行一个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

如何将 uint8 数组转换为 base64 编码字符串？

- DankMemes

---

我注意到的唯一性能影响是在打开devtools时（因为base64数据url可能很大）。然而，自从这个答案之后blob api已经成为标准，所以现在你可以使用它来代替data urls以获得更好的性能。 - DankMemes

Answer 3

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

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

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

2. 使用GET参数和令牌替换此功能的头部

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

- Val Entin

---

你关于将令牌作为参数添加的想法非常正确。谢谢！ - jlyonsmith

在URL中发送令牌是不好的做法。 - Lee Brindley

作为URL参数，应该是最后的选择，这是不好的做法，因为它可能会通过浏览器历史记录、引荐头等暴露令牌。 - Ward D.S.

Answer 4

您可以使用以下丑陋的内联hack

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

- Kamil Kiełczewski

---

如果获取失败，那么这不会导致无限的onerror循环吗？ - Dror Bar

@DrorBar 可能只有在使用 src 属性中给定的路径加载图像时发生错误才会执行 onerror 处理程序（但我没有深入检查）。onerror 内部的代码不处理任何未来的错误。 - Kamil Kiełczewski

这段代码使用了现代JavaScript特性，因此可能无法在旧版浏览器中运行。值得注意的是，这种方法可能会引起安全问题，因为它允许在错误事件上执行任意JavaScript代码。 - Siddharth Sogani