Javascript/jQueryで画像を作成して追加するにはどうすればよいですか？

Question

次のコードを使用して画像要素を作成し、読み込んでから読み込み時に記事に追加します。

$('<img />') 
    .attr('src', 'image.png') //actually imageData[0].url 
    .load(function() { 
    $('article').append($(this)); 
    alert('image added'); 
    }); 

アラートは[OK]をオフに発射されていますが、画像が表示されない、と私はそれを閉じずに追加された要素を検査したときに、なぜブラウザが前方を削除して

<img src='image.png' > 

を大幅に削減スラッシュと私はどのようにそれを停止するのですか？

UPDATE： それは問題（毎日の学校の日）だスラッシュではないことを指摘しているすべての人のおかげで、それは、何だろうか？問題は、私が使用したテスト画像（http://img.ffffound.com/static-data/assets/6/dc01f803819405bfe160459021cfe6cc57766f9b_m.jpg）であると思われるよう、私は、他の画像でこれをテストしていないためバカだよ表示されるように OK：ここでは実際の例http://chris-armstrong.com/inspiration/?username=behoff

UPDATE 2です。あなたがURLをクリックするとロードされるので不思議です...とにかく、すべてのあなたの助けをいただきありがとうございます、私はいくつかを学んだ！

Answer 1

提供された情報に基づいて、我々は次のことを知っている：

• イメージが正常に追加されます。

• 画像が正常に読み込まれました（そうでないとalert()を取得しません）

あなたは完全に透過画像（もちろんそうではない）を持っているか、私はあなたのCSSは、何とかその表示を妨げていることを賭けると思いますどちらか。

デモでコメントアウトしたCSSを使用した例です。

http://jsfiddle.net/JxhaR/（可視像）

すなわち、culpretがあると思われる：

display: -webkit-box; 

Iは、画像表示装置、それを無効にします。

http://jsfiddle.net/JxhaR/1/（画像が表示されている。）

Answer 2

はこれを試してください：あなたは要素を検査する場合

$('<img />') 
    .attr('src', 'image.png') 
    .append('article') 
    .load(function(){ 
     alert('image added'); 
    }); 

Answer 3

が、あなたはそれが追加されたことを方法それを見ることはありません。要素をHTMLコードまたは要素（この場合）として追加する場合でも、要素から作成されたコードを調べているときは、その要素を追加するために使用されたコードは見ていません。

$('<img />')を使用すると、実際にはdocument.createElement('img')となるため、終了スラッシュを表示できるHTMLコードはありません。要素はDOMオブジェクトとして作成され、HTMLコードからは作成されません。

画像が表示されない理由は、タグに終了スラッシュがないように見えるということではありません。

おそらく、ブラウザが探している場所にイメージが存在しない、つまりファイルが見つからないか、URLが正しくない可能性があります。