画像に指定したURLが存在しない時の壊れた画像表示をスタイル設定する方法

2021年3月8日

とても興味深い記事なのですが
イマイチ理解できず、
kachibito.netさんの記事でやっと
分かりました。

はじめに

img には擬似要素が使えないって知ってましたか？
お恥ずかしい話ですが、わたしは知りませんでした。
さらに、画像が読み込まれていない場合は適用される
って事も初めて知りました。

img には擬似要素が使えない

imgなどの閉じタグのないものには
擬似要素が使えないそうです。

なぜ？ 閉じタグがないと使えない？
閉じタグのない要素は カラ要素だと
判断されるため、仕様的に
擬似要素が適用できないと言う事らしいのです。

ただし、画像が読み込まれていない場合は適用される

• You can use pseudo-elements on broken images.
  Typically ::before and ::after elements won’t work on images, however, when image is not loaded this elements can appear.
• 壊れた画像に疑似要素を使用できます。
  通常、:: before要素と:: after要素は画像では機能しませんが、画像が読み込まれていない場合は、この要素が表示される可能性があります。

code

HTML

<img src="https://example.com/piyopiyo.jpg" alt="broken images">
<hr>
<img class="broken_images" src="https://example.com/hogehoge.jpg" alt="画像ないじゃん">
<hr>
<img class="broken_images" src="http://placekitten.com/300/300" alt="Cat Images">

CSS

.broken_images {
  display: inline-block;
  font-family: Arial, sans-serif;
  font-weight: 300;
  line-height: 2;
  text-align: center;
  min-width: 300px;
  min-height: 50px;
  position: relative;
}

.broken_images::before {
  content: '';
  width: 100%;
  height: calc(100% + 10px);
  background-color: #ccc;
  border-radius: 10px;
  position: absolute;
  top: 50%;
  left: -2px;
  transform: translateY(-50%);
}

.broken_images::after {
  content: "\2639" " " attr(alt);
  font-size: 18px;
  color: rgb(100, 100, 100);
  display: block;
  position: absolute;
  z-index: 2;
  top: 5px;
  left: 0;
  width: 100%;
  height: 100%;
}

結果

何もしなければ1番目の表示になります。
スタイルを適用すると
2番目のように任意のスタイルで表示されます。
スタイルを適用した場合でも
3番目のように画像があれば影響を受けません。

Firefoxの挙動

1. altがあると壊れた画像マークが表示されない。
2. altがあるとaltの中身が表示されてしまう。

HTML に alt を書かないで、
↓ 見たいな感じがよいのかな？

<img src="https://example.com/piyopiyo.jpg">
<hr>
<img class="broken_images" src="https://example.com/hogehoge.jpg">
<hr>
<img class="broken_images" src="http://placekitten.com/300/300" alt="Cat Images">

content: "\2639" " " attr(alt);
     ↓
content: "画像ないじゃん";

最後に

今回、たいへん勉強になりました。