imgタグのsrcが空の際の処理

Question

jQuery:3.1.1(Google CDN利用)

問題
srcが空の際と、リンク切れの際に代替画像を表示させたい。

以下のようにすることで解決いたしました

$(document).ready(function () {
  //srcが空の際、代替画像を表示
  $('img[src=""]').attr('src', 'data:image/png;base64,...');

  //srcがリンク切れ等エラーの際、代替画像を表示
  $('img').on('error', function () {
    $(this).attr('src', 'data:image/png;base64,...');
  });
})

代替画像が見つからないと無限ループになるため、Data URIを使用する。

Answer 1

したいことはこんな感じでしょうか？

  $('img[src=""]').attr('src', '404.png');

提示コードではすべての画像のsrcを空にして、documentのsrc属性？に'404.png'をセットしてしまいます。

Comments

[g-n-n]

ありがとうございます。上のコードを書き換えて以下の様にしました。
$(document).ready(function () {
$('img[src=""]').attr('src', '404.png');
$('img').on('error', function () {
$(this).attr('src', '404.png');
});
})

この様に書いてFirefoxで見ると2行目が効いた行で3行目以降のエラーが出ていますがこれは問題ないのでしょうか

[x_x]

落ち着いて正しい日本語で書いてもらえますか？
どういうエラーが出ているのでしょう？

[g-n-n]

Firefoxで確認したところ、正しく404.pngが表示されました。
なので、上のコードの2行目が実行されたはずです。
しかし、Firefoxのインスペクターにはイベントリスナー>errorとして、コードの3行目のfunctionがエラーであると表示されています。
エラーである以上の情報が出てこないため、どういったものなのかはわかっていませんが、これは無視しても問題ないものでしょうか

[x_x]

こちらでは再現しないので、再現するコードがほしいです。
なお、404.png の読み込みに失敗すると無限に読むことになってしまいますので、Data URI にしたほうがいいかもしれません。

[m.ts10806]

Chromeの場合、ローカルファイルではなくサーバー（ローカルでも）で動かすと質問者さんの「2018/07/31 14:02」のコードで出来ます。

[g-n-n]

firefoxのイベントリスナーのドキュメントを熟読してきました。
イベントが発生したことを表示する機能であって、エラーが発生しているということではないとのことでした（エラーであればコンソールの方にエラーの内容が出るため）
お騒がせして申し訳ありませんでした...
画像データに関しては確かに無限に読み込む可能性があるので、Data URIを使うように変更します

[x_x]

念のためサーバーを立ててテストしてみましたが、Firefox/Chromeいずれもエラーは出ませんでした。

[g-n-n]

ご確認いただきありがとうございます。
問題が完全に解決いたしましたので上のコードをアンサーとさせていただきます。
mts10806さん、x_xさんご協力いただきありがとうございました

Answer 2

検証はできていないので1つの案としてなのですが、
src属性が空のものはremoveAttrで属性を削除されては？

Comments

[g-n-n]

ありがとうございます。
写真があるか、またはまだ用意できてない、という形をとっているページのため写真がない場合でも属性を削除せずに代替画像を表示させたいです

[m.ts10806]

srcを削除してしまえばimgのerrorに引っかかるかなと思ったのですが・・
私のほうでも試してみます。

[m.ts10806]

現在提示のコードだと存在する場合にも全て404に置き換えてしまっているように見えます。
$('img').attr('src', '')　←これだと全部のsrcを空にしているだけなので・・

[g-n-n]

$(document).ready(function () {
$('img[src=""]').removeAttr('src');
$('img').on('error', function () {
$(this).attr('src', '404.png');
});
})
この様にしてsrcを削除したのですがerrorは発生しませんでした...

[m.ts10806]

そもそも存在しない画像パスを指定してもonerrorは発生しないみたいですね。
settimeoutで監視してみても想定したようにはなりませんでした。

少し進まれているようにsrc空の場合は提示の通りで良さそうですが。
$('img[src=""]').attr('src', '404.png');

[m.ts10806]

loadによるものなのでローカルではなく最低でもローカルサーバーで対応したほうがいいかもしれません。