img 图片标签给 src 请求添加 headers 参数

当我想要通过 img 图片标签展示图片时，服务端要求 src 请求必须添加 headers 参数。如何实现？

答案

无法直接通过图片标签设置头信息参数，以下有几种方案：

fetch + blob

使用 fetch 方法添加 headers 然后把结果加载到 <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 + base64

1. 需要通过异步请求设置请求头信息
2. 使用 HTML5 APIs 把二进制数据转换为base64
3. 把图片标签的src设置为data:协议和base64数据

var oReq = new XMLHttpRequest();
oReq.open("GET", "yourpage.jsp", true);
oReq.setRequestHeader("Your-Header-Here", "Value");
oReq.responseType = "arraybuffer";
oReq.onload = function (oEvent) {
  var arrayBuffer = oReq.response;
  if (arrayBuffer) {
    var u8 = new Uint8Array(arrayBuffer);
    var b64encoded = btoa(String.fromCharCode.apply(null, u8));
    var mimetype="image/png";
    document.getElementById("yourimageidhere").src="data:"+mimetype+";base64,"+b64encoded;
  }
};
oReq.send(null);

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

https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data

https://stackoverflow.com/questions/12710001/how-to-convert-uint8-array-to-base64-encoded-string

GET 查询参数

使用 GET 查询参数代替请求头信息可以完成同样的功能

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

参考

https://stackoverflow.com/questions/23609946/img-src-path-with-header-params-to-pass