Ajax 호출을 통해받은 이미지를 표시하는 방법은 무엇입니까?

Question

웹 서버는 이미지를 생성하여 클라이언트에 직접 보냅니다. 보안상의 이유로 이미지에 URL이 없습니다. 예를 들어, /images/25 URL을 입력하면 브라우저 서버에 URL이 전송되고 브라우저가이를 다운로드합니다.

이제이 이미지를 Ajax 호출에서 가져 와서 기존 페이지에 표시하고 싶습니다. 나는 이미지 데이터를 얻을 수있다. 내 질문은 : 어떻게 이미지를 표시 할 수 있습니까?

$.get("/images/25", function (rawImageData) { 
    // ??? Need to add an image to DOM 
}); 

업데이트 난 너무 바보 사과

. 고마워, JW. 물론 src에 img 태그를 넣을 수는 있습니다. 이 URL이 이미지 파일의 직접 URL인지 또는 서버가 동적으로 보내는 것인지는 중요하지 않습니다.

Answer 1

따라서 은이고 URL은 /images/25입니다.

내가 아는 한 AJAX 통화 *에서 가져온 이미지 데이터를 표시 할 수 없습니다. 하지만 URL을 <img> 태그에 넣는 것만 큼은 어떨까요? 브라우저에서 파일에서 읽는 대신 이미지를 서버에서 생성하는 것은 중요하지 않습니다.

* 편집 : 잘못되었습니다. AJAX 호출을 사용해야하는 경우 (예 : POST 요청을하거나 특정 헤더를 보내야하는 경우) gideon의 대답을 참조하십시오.

Answer 2

base64-encoded과 data:// URI scheme을 결합한 원시 이미지 데이터를 보내려고합니다.

Answer 3

PHP 또는 ASP 등으로 렌더링 한 경우와 동일합니다.

$('#elementOfChoice').append('<img src="'+ rawImageData +'" alt="something" />'); 

비록 내가 틀릴 수도 있지만. 모두는 그 이미지를 그대로 만들기 위해 장면 뒤에 무엇이 일어나고 있는지에 달려 있습니다. PHP 파일을 통과시켜야 base_64 이미지가 생성되고 인코딩해야 할 필요가 있거나 그럴 경우 그에 따라 처리해야합니다.

Answer 4

매트의 대답을 확장하면 base64로 인코딩 된 img URL을 사용할 수 있습니다. 당신은 빈 이미지가 필요

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA 
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" /> 

:이은 img 태그가 어떻게 보이는지의 example from wikipedia입니다

<img id="target" src="" /> 

서버가 base64로 문자열로 이미지를 반환 할 필요가

은, 당신은 할 수 있습니다 :

$.get("/images/25", function (rawImageData) { 
     $("#target").attr("src","data:image/gif;base64," + rawImageData); 
}); 

자세한 내용은 base64로 인코딩 된 img URL을 참조하십시오. MDN reference http://jsfiddle.net/99jAX/1/

Answer 5

$("<img>").attr("src", icon_url).appendTo("#images");