web-dev-qa-db-ja.com

渡すヘッダーパラメータを含むImgsrcパス

Jspページにimgタグがあり、srcパスで画像を取得するためにヘッダーパラメーターを渡す必要があります。どうすればそれを達成できますか？

javascriptajaxprototypejs
12
Arjun

まず、ヘッダーを設定する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

int8配列をbase64エンコード文字列に変換する方法は？

12
DankMemes

これで、 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);
});
10
flawyte

Imgタグを使用してヘッダーパラメータにアクセスすることはできません。2つの解決策があります。

ヘッダーパラメーターを指定してAjaxリクエストを使用し、画像データを読み込みます

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

この機能のヘッダーを置き換えるには、トークンでGETパラメーターを使用します

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

5
Val Entin

次の醜いインラインハックを使用できます

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