JavaScriptを使用して画像が存在するかどうかを判断します_存在しない場合は、デフォルトの画像のコードを表示します

Web サイトやアプリケーションでは、画像を表示する必要がある場合がありますが、その画像が存在するかどうか、サーバー上で削除されているかどうかがわかりません。このとき、画像を直接表示するとエラーが発生する場合があります。この問題を解決するには、JavaScript コードを使用して画像が存在するかどうかを判断し、画像が存在しない場合はデフォルトの画像を表示します。この記事では、JavaScriptを使用してこの機能を実装する方法を紹介します。

まず、表示する画像を div または img タグでラップし、タグ内にカスタム属性 src-real を設定して画像の実際のパスを保存する必要があります。コードは次のとおりです:

<div class="image-container">
  <img  class="image" src="" src-real="path/to/image.jpg" alt="JavaScriptを使用して画像が存在するかどうかを判断します_存在しない場合は、デフォルトの画像のコードを表示します" >
</div>

次に、JavaScript を使用して画像が存在するかどうかを確認します。 Image オブジェクトの onload イベントと onerror イベントを使用すると、イメージの読み込みが完了するか失敗したときに、対応するイベント処理関数をトリガーできます。イメージを表示するには、読み込み完了イベント onload でイメージの src 属性を実際のパス src-real に設定し、次に示すように、読み込み失敗イベント onerror でイメージの src 属性をデフォルトのイメージのパスに設定します。以下:

// 获取所有要判断的图片节点
const images = document.querySelectorAll('.image')

// 循环遍历每个图片节点
images.forEach(image => {

  // 创建一个新的Image对象
  const img = new Image()

  // 加载完成，显示实际图片
  img.onload = () => {
    image.src = image.getAttribute('src-real')
  }

  // 加载失败，显示默认图片
  img.onerror = () => {
    image.src = 'path/to/default-image.jpg'
  }

  // 设置Image对象的src属性并加载图片
  img.src = image.getAttribute('src-real')
})

上記のコードでは、まず、querySelectorAll メソッドを通じて判定対象のすべての画像ノードを取得し、各画像ノードをループします。次に、新しい Image オブジェクトを作成し、その onload および onerror イベント ハンドラーを設定しました。イメージがロードされると、onload イベントがトリガーされます。getAttribute メソッドを通じてイメージの実際のパス src-real を取得し、そのパスをイメージ ノードの src 属性に割り当てて実際のイメージを表示できます。 onerror イベントがトリガーされると、イメージ ノードの src 属性をデフォルト イメージのパスに設定して、デフォルト イメージを表示できます。

最後に、画像の読み込みに失敗したときに正しいデフォルト画像が表示されるように、CSS でデフォルト画像のスタイルを設定する必要があります。コードは次のとおりです。

.image {
  width: 300px;
  height: 200px;
  background-color: #ddd;
}

.image[src*="default"] {
  background-image: url('path/to/default-image.jpg');
  background-size: cover;
  background-repeat: no-repeat;
}

上記のコードでは、最初に画像の幅、高さ、背景色を設定します。次に、CSS 属性セレクター [src*="default"] を使用して、src 属性に「default」を含むすべての画像ノードを選択し、画像ノードの背景画像をデフォルト画像のパスに設定します。デフォルトのピクチャーエフェクトを表示します。

要約すると、JavaScript コードを使用して画像が存在するかどうかを判断し、画像が存在しない場合はデフォルトの画像を表示できます。これにより、ユーザー エクスペリエンスが向上し、画像の読み込み失敗によるエラー状況が軽減されます。

以上がJavaScriptを使用して画像が存在するかどうかを判断します_存在しない場合は、デフォルトの画像のコードを表示しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。