search
LoginSignup
29
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

Organization

img要素の「画像がないことを表すマーク」の表示/非表示

背景

img要素で指定した画像が存在しないとき、「画像がないことを表すマーク」が表示されます。
IEではバツ印で表示されるので、このマークを便宜上「バツ印」と呼びます。

このバツ印のおかげで、ユーザは「画像が本来表示されるはずだけど、何かエラーで画像が表示されていないんだ」と気づくことができます。
しかしバツ印を表示させたくない場合もあります。
たとえば、以下の場合です。

  • 画像パスはkeyから決まるんだけど、画像があるかどうかは分からない。とりあえず画像があれば表示したい
  • 画像の有無は調べず、とりあえずimg要素のsrc属性にkeyから決まるパスを設定しよう!

この場合、「画像が表示されない」ことも正常なので、バツ印を非表示にしたいです。

バツ印の表示/非表示が、ブラウザ、src属性,alt属性によって変わるので、それをまとめました。

検証方法

ブラウザ、src属性, alt属性のパターンを組み合わせて、検証します。

ブラウザ

  • Firefox46
  • IE11
  • Chrome52

alt属性

  • alt属性を指定
  • alt属性が空文字
  • alt属性を記述しない

src属性

  • src属性を指定(存在しない画像パス)
  • src属性が空文字
  • src属性がbase64で空画像
  • src属性を記述しない

以下のCSSを有効にして、ブラウザで確認します。

img {
  border: solid 1px;
  width:150px;
  height:30px;
  display:block;
}

結果

表の「○」はバツ印の表示、「×」がバツ印の非表示を表します。

src属性に存在しない画像パスを指定

<h3>alt属性を指定</h3>
<img src="sample.png" alt="代替テキスト">

<h3>alt属性が空文字</h3>
<img src="sample.png" alt="">

<h3>alt属性を記述しない</h3>
<img src="sample.png" >

src属性指定.png

alt属性 Firefox Chrome IE
あり ×
空文字 ×
なし

src属性が空文字

<h3>alt属性を指定</h3>
<img src="" alt="代替テキスト">

<h3>alt属性が空文字</h3>
<img src="" alt="">

<h3>alt属性を記述しない</h3>
<img src="" >

src属性が空文字.png

alt属性 Firefox Chrome IE
あり × × ×
空文字 × × ×
なし × ×

src属性がbase64で空画像

<h3>alt属性を指定</h3>
<img src="data:image/png;base64," alt="代替テキスト">

<h3>alt属性が空文字</h3>
<img src="data:image/png;base64," alt="">

<h3>alt属性を記述しない</h3>
<img src="data:image/png;base64," >

src属性がbase64.png

alt属性 Firefox Chrome IE
あり ×
空文字 ×
なし

src属性を記述しない

<h3>alt属性を指定</h3>
<img  alt="代替テキスト">

<h3>alt属性が空文字</h3>
<img  alt="">

<h3>alt属性を記述しない</h3>
<img  >

src属性がなし.png

alt属性 Firefox Chrome IE
あり × × ×
空文字 × × ×
なし × × ×

考察

  • ChromeとIEの結果は同じ。
  • src属性が指定されたときと、base64形式で空画像を指定したときの結果は同じ。
  • alt属性が指定されたときと、空文字のときの結果は同じ。

結果が同じパターンをまとめると、以下の表になります。

src属性 alt属性 Firefox Chrome/IE
あり/base64 あり/空文字 ×
あり/base64 なし
空文字 あり/空文字 × ×
空文字 なし ×
なし あり/空文字 × ×
なし なし × ×
  • Firefoxはalt属性が指定されていれば、常にバツ印が非表示。
  • IE/Chromeは、src属性が記述されていない OR 空文字ならば、常にバツ印が非表示。
  • Firefoxは、src属性が記述されていなければ、常にバツ印が非表示。

Firefox, Chrome, IEで、バツ印を非表示にするには、以下のいずれかの状態にする必要があります。

  • src属性が空文字 AND alt属性があり/空文字
  • src属性がなし

ただHTMLの仕様でsrc属性は必須です。
HTMLの仕様に従うならば、「画像の有無を判定して、画像がなければimg要素を非表示/消す」必要があるんですかね。。。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
29
Help us understand the problem. What are the problem?