Ajaxコールで受け取った画像を表示する方法は？

Question

Webサーバーはイメージを生成し、クライアントに直接送信します。セキュリティ上の理由から、イメージへのURLはありません。たとえば、/images/25と入力すると、ブラウザサーバーにURLが送信され、ブラウザがそれをダウンロードします。

今、この画像をAjaxコールから取得し、それを既存のページに表示したいとします。画像データを取得できます。私の質問は、画像をどのように表示するのですか？

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

更新

私は愚かであることをお詫び申し上げます。ありがとう、JW。もちろん、srcにimgタグをURLに入れるだけです。これが画像ファイルへの直接URLであるか、またはサーバがそれを動的に送るかどうかは関係ありません。

Answer 1

だから、はのように聞こえ、それは/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

Mattの回答を拡大するには、base64でエンコードされたimg URLを使用できます。あなたは空白の画像を必要とする

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

：

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

サーバーがbase64文字列として画像を返す必要があり、その後、あなたができるこれは、imgタグがどのように見えるかのexample from wikipedia次のとおりです。

$.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");