1. ホーム
  2. ハイパーリンク

[解決済み] [Solved] Inputting a default image in case the src attribute of an html <img> is not valid?

2022-03-29 21:17:32

Question

Is there any way to render a default image in an HTML <img> tag, in case the src attribute is invalid (using only HTML)? If not, what would be your lightweight way to work around it?

How to solved?

You asked for an HTML only solution...

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

<head>
  <title>Object Test</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body>

  <p>
    <object data="http://stackoverflow.com/does-not-exist.png" type="image/png">
      <img src="https://cdn.sstatic.net/Img/unified/sprites.svg?v=e5e58ae7df45" alt="Stack Overflow logo and icons and such">
    </object>
  </p>

</body>

</html>

Since the first image doesn't exist, the fallback (the sprites used on this web site*) will display. And if you're using a 本当に をサポートしていない古いブラウザでは object の場合、そのタグは無視され img タグを使用します。参照 カニース のサイトで互換性を確認してください。この要素は IE6+ 以降のすべてのブラウザで広くサポートされています。

* 画像のURLが(再び)変更されない限り、その場合はおそらくaltテキストが表示されます。