Help us understand the problem. What is going on with this article?

【Ma_gician #03】代替画像はデザイナーさんにお任せ

【Ma_gician #03】代替画像はデザイナーさんにお任せ

by StewEucen
1 / 14

エラー時の代替画像

  • <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


募集

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

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

StewEucen
「Stew Eucen」「悉生 游漩」は「しちゅう ゆうせん」と読みます。新しい JavaScript フロントエンドフレームワーク x-ninja の中の人です。
http://x-ninja.org
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした