JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div>
  <h4>圖片載入失敗範例</h4>
  <img src="404.jpg" alt="404"/>
</div>
<div>
  <h4>利用 alt 提示載入錯誤</h4>
  <img src="404.jpg" alt="圖片載入錯誤" />
</div>
<div>
  <h4>利用 :after 或 :before 做點什麼 1</h4>
  <img src="404.jpg" alt="圖片載入錯誤" class="ex1"/>
</div>
<div>
  <h4>利用 :after 或 :before 做點什麼 2</h4>
  <img src="404.jpg" alt="圖片載入錯誤" class="ex2" />
</div>
</div>

CSS

.ex1:before
{
  content: "the image below is broken :(";
  display: block;
  margin-bottom: 10px;
}

ex1:after {  
  content: "(url: " attr(src) ")";
  display: block;
  font-size: 12px;
}

.ex2:after
{
  content: "\f1c5" " " attr(alt);

  font-size: 16px;
  font-family: FontAwesome;
  color: rgb(100, 100, 100);

  display: block;
  position: relative;
  z-index: 2;
  top: -27px;
  left: 0;
  width: 120px;
  height: 25px;
  background-color: #fff;
}