전달할 헤더 매개 변수가 있는 Img src 경로

전달할 헤더 매개 변수가 있는 Img src 경로

jsp 페이지에 img 태그가 있습니다.여기서 src 패스는 이미지를 취득하기 위해 헤더 파라미터를 통과해야 합니다.어떻게 하면 좋을까요?

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

아약스그런 다음 HTML5 API를 사용하여 수신된 이진 데이터를 base64로 변환해야 합니다.마지막으로를 "src"로 설정합니다.data:Base64입니다.

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 부호화 문자열로 변환하는 방법

img 태그로는 헤더 파라미터에 액세스할 수 없습니다.다음 두 가지 솔루션이 있습니다.

Ajax 요청을 헤더 매개 변수와 함께 사용하여 이미지 데이터 로드

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

GET 매개 변수를 토큰과 함께 사용하여 이 기능의 헤더를 바꿉니다.

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

추악한 인라인 해킹을 사용할 수 있습니다.

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

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