エラー時の代替画像

• <img> に指定した src の画像がエラーになった場合、代替画像に差し替える実装がよくあります。

    <img src="xxxx.jpg">

ブラウザ標準のエラー表示

• <img src="xxxx.jpg"> で xxxx.jpg という画像が存在しない場合、下のようにブラウザ標準のエラー表示になります。

  

デザインの統一性

• ブラウザ標準のエラー表示は、
  サイトデザインの統一性を崩してしまう。

• デザインの統一性を保持するため
  「No Image」を意味する画像に差し替える。

Pure JavaScript による対応

• 以下の<script>で、画像ロードに失敗した時に「No Image」画像を差し替えてくれます。

<img id="xxx" src="xxxx.jpg">
<script>
  document
    .getElementById('xxx')
    .addEventListener('error',
      event => event.target.src = 'no-image.gif'
    )
</script>

画像ロードエラー時の処理

• エラー時の代替画像を差し替える処理は全部同じ。

• <img>の数だけ同じコードを書く。

必要なのは・・・？

代替画像 URL だけ !!

Ma_gician の実装

• <img> に直接代替画像 URL を指定します。

<div><img src="xxx.jpg"></div>

<div><img src="xxx.jpg"
          x-fallback="no-image.gif" _></div>

• Lightning Talk では、ここでライブコーディングします。

一括指定

• 全画像に共通の「No Image」を指定したい場合は、bo_otstrap.jsファイル内で指定したファイルがディフォルトで代替画像として使われます。

<script src="assets/js/bo_otstrap"></script>

いいこといろいろ

1. Ma_gician を使えば、代替画像の差し替え処理は「代替画像 URL」を指定するだけになる。

2. デザイナーさんが HTML を作成する場合、代替画像を指定した状態で納品できる。

3. 代替画像差し替えに関して、学習コストが理論上の最小になる。

Ma_gician を作った人

• 名前: Stew Eucen （悉生 游漩）
  読み方： しちゅう ゆうせん
• 国籍: 日本

SNS

• Twitter: @StewEucen
• Facebook: Stew Eucen

募集

• オープンソース活動を支援していただけるスポンサーを募集してます。

ご静聴ありがとうございました!!