html - 不足している画像アイコンを指定

Question

重複の可能性:
壊れた画像を置き換える jQuery/Javascript

これは簡単なはずですが、グーグルで検索する用語がわかりません。これは HTML/CSS だと思います。画像リンクが壊れていると、赤、緑、青の形のページを示す欠落した画像アイコンが表示されることがよくあります。HTML では、「画像リンクが壊れている場合にこの画像を使用しますか?」を構成できますか?

Answer 1

「onerror」の例:

<img src="fail.jpg" onerror="this.src='https://www.google.com.br/logos/2012/montessori-res.png';">

http://jsfiddle.net/u4hQd/

Answer 2

これの核心は、動的機能を CSS に追加する方法だと思います。ブラウザーの検出以外に、CSS の if/else チェックについては知りませんが、このようなことをする必要がある場合は、これを行います。

php を使用している場合は、次のようにすることができます。

$imagename = "image.png";
if (file_exists($imagename)){
   echo '<p class="exists">';
} else {
   echo '<p class="dne">';
}

次に、CSSで使用できます

.exists{background:url("../img/git-sprite.png") no-repeat 0px -32px;}
.dne{background:url("../img/git-sprite2.png") no-repeat 0px -32px;}

このようにして、CSS 自体に if/else 機能を追加できます。PHP を使用する必要はありません。JavaScript も同様に機能すると確信しています。

Answer 3

phpを使用していますか？

次のような方法でファイルを送信する前に確認できます。

$filename = "whatever.png";
if (file_exists($filename)){
   $html = "<img src=\"$filename\">";
} else {
   $html = "<img src=\"someotherpath.jpg\">";
}
echo $html;

Answer 4

あなたの質問は、追加の用語がなくても理解できます。残念ながら、HTML には必要な手段がありません。

できることは、JS (jQuery が役立ちます) を使用して、ドキュメント内のすべての img タグを循環し、それらのどれに画像があるかを確認することです (null に対して確認します)。画像を見逃した人のために、他の画像を読み込むことができます (いくつかのデフォルト)。

ただし、ページが完全にロードされた後 (すべてのアセット: JS、CSS、画像) にこのスクリプトを実行することを忘れないでください。実際の画像をロードします。