2012-01-26 7 views
27

imgタグを配置すると、src属性が動的に作成されます。imgのsrcが存在するかどうかを確認します。

var im = document.getElementById('imageID'); // or select based on classes 
im.onerror = function(){ 
    // image not found or change src like this as default image: 

    im.src = 'new path'; 
}; 

enter image description here

+2

を、あなたはブラウザはJavaScriptが無効を持つことができ、このためにチェックするために、サーバー側のスクリプトを使用して検討する必要があります。 – rogerlsmith

+0

「実際に存在する」を定義します。クロスドメイン・オリジン・ポリシーのため、ブラウザはJavascriptを使用してリモート・サイトから取得したイメージを調べることができないため、求めているものは不可能かもしれません。 URLをサーバーに送信してファイルをダウンロードさせることはできますが、それはセキュリティの観点からは悪い考えです。 – Borealid

+0

この投稿が見つかりました。それはあなたを助けるはずです。 http://www.irt.org/script/52.htm –

答えて

58

あなたはerrorイベントを使用することができます:SRC(画像が配置されているパス)が実際に取得しないようにするために、JavaScriptを使用して存在する場合、テストの方法はありますインラインバージョン:

<img src="whatever" onError="this.src = 'new default path'" /> 

または

<img src="whatever" onError="doSomething();" /> 

<img>タグこれらのイベントをサポートしています。

  • abort(onAbort)
  • error(のonError)
  • load(オンロード)

詳細情報:

+0

他のフォーラムでIEで動作しないことがわかりましたが、それは正しいですか? –

+0

@ Mr:Works for me:http://jsbin.com/egohud – Sarfraz

+0

右、ありがとう!おそらくxDに感謝していた初期のバージョンでしょう。 –

10

あなたは(headメソッドで)以前のAJAX呼び出しを行うと、サーバーのリターンコード を参照するか、URLを変更するにはonerrorイベントを使用することができますすることができますまたはそれを隠す、例えば

<img src="notexist.jpg" onerror="this.style.visibility = 'hidden'"> 

(私はアイデアを説明するために、インライン属性を使用しました)

+0

素晴らしい例です。魅力のように動作します。 –

0

あなたはこの間違った方法に近づいています。
サーバーサイドスクリプトでリンクを生成するときに、ファイルが存在するかどうかをチェックします(たとえば、PHPでfile_exists()を使用)。

JavaScriptを変更したり無効にすることができるため、サーバー側で行うことができるときにはJavaScriptを使用しないでください。

src=の属性をどのように生成しているのかを確認し、ファイルが存在するかどうかを確認して、代替手段を提供してください。

4

あなたがこれを使用することができますJavaScriptで動的にSRCを作成する場合:

var obj = new Image(); 
 
    obj.src = "http://www.javatpoint.com/images/javascript/javascript_logo.png"; 
 

 
if (obj.complete) { 
 
    alert('worked'); 
 
} else { 
 
    alert('doesnt work'); 
 
}

+1

画像は次のパスにありますが、コードスニペットを実行すると「いいえ」と表示されます。それは「同じ起源政策」のためでしょうか? – yalpertem

+0

これは、obj.completeがfalseを返すためです。コードはすぐに実行されます。状態はまだ完全ではありません。それで、それは常にelseブロックに行きます –

関連する問題