ajax 통신 응답에 받은 이미지 브라우저 출력하기

Question

안녕하세요 사용자 값을 post 로 받아 서버에서 이미지를 만들어서 저장하지 않고 바로 사용자 화면에 보여주어야 하는 기능입니다. 컨트롤러에선 &#64;PostMapping(&#34;/area-png&#34;) public &#64;ResponseBody void getPng(&#64;RequestBody Map<String, Object> params, Model model, HttpServletResponse response) { System.out.println(params); response.setHeader(&#34;Content-Type&#34;, &#34;image/png&#34;); response.getOutputStream().write(areaService.makeMap()); }이렇게 response 에 응답을 내려주고 있고 앞에선 ajax 로 요청합니다. $.ajax({ url: '/area-png', data: JSON.stringify(data), method: &#34;POST&#34;, success: function (result) { console.log(JSON.stringify(imgSrc)) }, ... });이미지가 resposne 에 담겼는지 확인은get 으로 변경 후 postman 에서 하니 응답창에 이미지가 출력됐습니다. 이걸 post 로 바꿔 img 에 src 에 넣으려니 에러가 납니다. console.log 에 난 에러는 아래와 같습니다.src&#61;&#34;data:image/png;base64, 이런 방식도 되지 않고 blob 으로 받는 방식도 해봤는데 안됩니다.https://okky.kr/articles/1097973 이분 질문과 비슷한듯 한데 저도 저런식으로 출력이 됩니다.이런 방법으로 시도하는게 맞을까요? 꼭 서버에 저장을 한 후에 주소를 불러오는 방식으로 사용해야 할까요?

컴포지트 · Answer

$.ajax({ url: '/area-png', // post 및 요청 값... dataType:&#34;image/pmg&#34;, success: function (data) { $('#myimg').attr('src', data); } });이렇게 해보시길... jquery ajax로 해본 적이 없는데 어디서 긁어왔습니다.

INFJ-A · Answer

http://www.jongminjang.com/html5/file/2018/12/27/blob-as-img-src.html 혹시 시도해보신 1번 방법에서 FileReader API 를 사용해보셨나요? 도움이 되길 바랍니다.

룰류랄랴 · Answer

byte[] 로 get으로 받을 수 있어 post 로 해보려한건데 왜 안되는지는 모르겠지만 아래처럼 하여 해결하였습니다. https://myhappyman.tistory.com/210컨트롤러 답변 타입을 Map<String, Object> 로 변경하여 map 에 put 한 후 ajax 성공 함수에 $(&#34;#img&#34;).attr(&#34;src&#34;, &#34;data:image/png;base64,&#34; &#43; result.blob); 이렇게 바디에서 꺼내어 붙여주니 이미지 출력됩니다. 답변해주신분들 감사합니다.

ajax 통신 응답에 받은 이미지 브라우저 출력하기

3개의 답변

Q&A 목록