誰に向けて

壊れた画像のあつかいがわからない人
イベントハンドラのことがわからない人
JavaScriptの実行順序について、あまり理解していない人

経緯

「壊れた画像をno imageに差し換える」

単純に見える作業ですが、
めちゃくちゃハマりました。

けもの道を作る気持ちで、連載します。

サンプルのHTML

broken_image.html

<html>

<head>
    <style type="text/css">
        div {
            width: 150px;
            height: 150px;
            border: 1px solid;
        }

        img {
            max-width: 100%;
            max-height: 100%;
        }
    </style>
</head>

<body>
    <!--存在しない画像-->
    <div>
        <img src="http://google.com/hogehoge.jpg" />
    </div>
    <div>
        <img src="http://google.com/fugafuga.jpg" />
    </div>
    <!--存在する画像-->
    <div>
        <img src="https://3.bp.blogspot.com/-rNmXJXzt8DQ/VsPnSNB6MzI/AAAAAAAA4Dw/GOIgFy4n2ls/s180-c/music_sakkyoku_piano_man.png"
        />
    </div>
    <div>
        <img src="https://2.bp.blogspot.com/-lAIFjv3ejHg/WEztKOlwR-I/AAAAAAABAUU/d9sJUl9xolIAaodsAHmZQFVj_7wkqpSmQCLcB/s400/ai_music.png"
        />
    </div>

</body>

</html>

表示結果

上の2枚の画像が壊れているので、
直したいですね。

試行錯誤スタートです！！

Level①インラインでonerrorを使う

broken_image_onerror.html

<html>

<head>
    <style type="text/css">
        div {
            width: 150px;
            height: 150px;
            border: 1px solid;
        }

        img {
            max-width: 100%;
            max-height: 100%;
        }
    </style>
</head>

<body>
    <!--存在しない画像-->
    <div>
        <img src="http://google.com/hogehoge.jpg" onerror="this.src='https://placehold.jp/150x150.png?text=NoImage'"
        />
    </div>
    <div>
        <img src="http://google.com/fugafuga.jpg" onerror=" this.src='https://placehold.jp/150x150.png?text=NoImage'"
        />
    </div>
    <!--存在する画像-->
    <div>
        <img src="https://3.bp.blogspot.com/-rNmXJXzt8DQ/VsPnSNB6MzI/AAAAAAAA4Dw/GOIgFy4n2ls/s180-c/music_sakkyoku_piano_man.png "
        />
    </div>
    <div>
        <img src="https://2.bp.blogspot.com/-lAIFjv3ejHg/WEztKOlwR-I/AAAAAAABAUU/d9sJUl9xolIAaodsAHmZQFVj_7wkqpSmQCLcB/s400/ai_music.png "
        />
    </div>

</body>

</html>

表示結果

壊れた画像がnoimageに変わりました。
これで、最低限対応できそうです。

この方法の問題

壊れた画像に決め打ちでonerrorを指定していくのは、
現実的ではありません。

じゃあすべての<img>タグにonerrorを指定するかというと、
それも気が遠くなる話です。

そもそも、HTMLにインラインでscriptを記述するのは非推奨としている現場が多いです。
理由は、大きくわけて以下の2点です。

①外部Scriptが予期せぬ動きをする原因になる

<img>タグをつかんでなにか操作する外部のScriptを読み込んでいる場合、
タグ内のScriptが悪さをすることがあります。

いつどこでどの要素にどんな操作が行われているのか追うのが困難になるので、
なるべく避けたほうが無難です。

②変更を加えづらい

ソース内にべったりコードを書いてしまうと、
変更を加えるときに困難です。

「noimageの画像を変えたい」
と思ったときに、他のページのHTMLも全て書き換えることになります。

それはちょっと。。。ですよね。

次回

Level② 「onerror」を使う
です。

2018/06/19追記
書きました！
https://qiita.com/konkipiano/items/4ddf3bdc74cef138b22e

【jQuery3.3.1】壊れた画像を"noimage.jpg"に差し換える Level①インラインでonerrorを使う