html - 代替画像をhtmlで表示する

Question

ブラウザがフォント パッケージを処理できない場合specialFont、次のコードは自動的にフォントを に切り替えますbasicFont。

<p style="font-family:'specialFont', basicFont"> Hello world! </p>

画像でも同じことが可能ですか？一般的に表示したいsvg画像と、svgをサポートしていないブラウザー（一部のモバイルブラウザーなど）用のバックアップpngがあります。

Answer 1

簡単なシナリオはobject、別のobject要素 (たとえば、PNG ファイルを参照) を含む要素を使用することです。つまり、フォールバック コンテンツとして使用します。これは Android 2 では問題なく動作するように見えますが、IE 8 以前ではこれと混同されます。そのため、醜い「IE 疑似コメント」(別名「条件付きコメント」) でそれらを処理する必要があると思います。

<!--[if (IE 9)|!(IE)]><!-->
  <object data=logo.svg type=image/svg+xml width=50 height=50>
    <object data=logo.png type=image/png width=50 height=50>
      <span class=logo>ACME</span>
    </object>
  </object>
<!-- <![endif]-->
<!--[if lte IE 8]>
  <img src=logo.png alt=ACME>
<![endif]-->

Answer 2

onerror イベントを使用してギャップを埋めることができます。onError イベントを jQuery などと結び付けることで、デフォルトの画像を提供できます。詳細については、投稿があります。