javascript 画像が存在しなければエラーを表示する

作成日 2020.11.19
更新日 2022.07.22
javascript
javascript

javascriptで、onerrorを使用して画像が存在しなければエラーを表示するサンプルコードを記述してます。

1. 環境
2. onerror使い方
3. 画像がない場合に代替え
4. サンプルコード

環境

OS windows10 pro 64bit
Apache 2.4.43
ブラウザ chrome 103.0.5060.114

Javascript サンプル集はこちら

onerror使い方

「onerror」イベントを使うと、画像やドキュメントが読み込めないエラーイベントを取得することができます。

<img id="noimage" src="no.png" onerror="hoge();" alt="altを表示">

<script>

function hoge() {
  //処理を記述    
}

</script>

実際に使用してみます。

<img id="noimage" src="no.png" onerror="hoge();" alt="altを表示">

<script>

function hoge() {
  console.log('画像がありません')
}

</script>

実行結果

イベントリスナーに登録して使用することも可能です。

<img id="noimage" src="no.png" alt="altを表示">

<script>

document.getElementById("noimage").addEventListener ( 
  "error", function(){ console.log('画像がありません')} 
)

</script>

「onerror」に関数を登録することもできます。

<img id="noimage" src="no.png" alt="altを表示">

<script>

document.getElementById("noimage").onerror = function(){ 
  console.log('画像がありません')
} 

</script>

addEventListenerとonの違い

また、javascript部はdocument.getElementByIdを省略して「id名」のみ記述することも可能です。関数もアロー関数を使用できます。

noimage.onerror = () => { 
  console.log('画像がありません')
}

アロー関数の使い方

画像がない場合に代替え

画像がない場合に、代替え画像をいれたい場合は関数内で「src」に画像を指定します。
※「onerror」イベントもついでに削除してます。

<img id="noimage" src="no.png" alt="altを表示">

<script>

noimage.onerror = () =>{

    noimage.src='noimage.png';
    noimage.removeAttribute('onerror')

}

</script>

実行結果

サンプルコード

以下は、画像がないとエラーを表示するサンプルコードとなります。

※cssには「bootstrap material」を使用してます。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
  <link rel="stylesheet"
    href="https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css"
    integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous">
</head>
<style>
  .main {
    margin: 0 auto;
    margin-top: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 20px;    
  }
</style>
<script>

  function hoge() {
    document.getElementById('result').textContent = "id:noimageの画像がありません";    
  }

</script>

<body>
  <div class="main">
    <div class="alert alert-success" role="alert">
      <h4 class="alert-heading">エラーメッセージ</h4>      
      <hr>
      <p id="result" class="mb-0"></p>
    </div>

    <img id="noimage" src="no.png" onerror="hoge();" alt="altが表示">
  </div>
</body>

</html>

エラーが表示されていることが確認できます。