html - 代替画像を表示

Question

元のソース ファイルが見つからない場合、別の画像を表示することはできますか? 私はcssとhtmlのみでこれを達成したいと思います.javascript（またはjQueryなど）は使用しません. アイデアは、IE の「alt」テストまたはデフォルト (醜い) クロスの代わりに画像を表示することです。JavaScriptなしでは不可能な場合は、基本的なif-then-elseを使用して、phpでimg srcをチェックします。

Answer 1

これは、img 要素の CSS background-image プロパティを使用して行うことができます。

img
{
background-image:url('default.png');
}

ただし、これを機能させるには、幅または高さを指定する必要があります (img-src が見つからない場合)。

img
{
background-image:url('default.png');
width:400px;
}

Answer 2

<object data="foobar.png" width=200 height=200>
  <img src="test.png" alt="Just testing.">
</object>

これfoobar.pngがプライマリ イメージで、test.pngがフォールバック イメージです。要素のセマンティクスにより、object要素 (ここでは要素) のコンテンツは、(属性で指定された) プライマリ データを使用できないimg場合にのみレンダリングする必要があります。data

過去 1 年間、ブラウザーには の実装にひどいバグがありobjectましたが、この単純な手法は最新バージョンの IE、Firefox、Chrome で機能するようです。