javascript img src 変わらない

Javascriptでimg srcが変わらない時の原因と対策【画像が更新されない！】

JavaScriptを使って画像のsrc属性を変更しても、なぜか画像が変わらない...そんな悩みを解決します！この記事では、画像が更新されないよくある原因とその解決策を分かりやすく解説します。

画像が更新されない原因

1. キャッシュの影響

ブラウザは表示速度向上のために画像をキャッシュすることがあります。そのため、JavaScriptでsrc属性を変更しても、キャッシュされた古い画像が表示されてしまうことがあります。

解決策

src属性にタイムスタンプを追加する
HTTPヘッダーでキャッシュを無効化する

src属性にタイムスタンプを追加する例

<img id="myImage" src="image.jpg" alt="画像">
<script>
  const img = document.getElementById('myImage');
  const timestamp = new Date().getTime();
  img.src = `image.jpg?t=${timestamp}`; 
</script>

2. JavaScriptのコードの誤り

JavaScriptのコードに誤りがあると、src属性が正しく変更されないことがあります。

解決策

JavaScriptコンソールでエラーを確認する
コードをステップ実行して動作を確認する
変数名、パス名に誤りがないか確認する

3. 画像の読み込みエラー

指定したパスに画像が存在しない、または画像形式がブラウザでサポートされていない場合、画像は表示されません。

解決策

画像のパスが正しいことを確認する
画像形式がブラウザでサポートされていることを確認する

4. 非同期処理のタイミング問題

AJAXなどで非同期に画像URLを取得し、src属性に設定する場合、タイミングによって画像が更新されないことがあります。

解決策

画像URLの取得が完了してからsrc属性を設定する
Promiseやasync/awaitを使って非同期処理を制御する

Promiseを使った例

<img id="myImage" src="placeholder.jpg" alt="画像">
<script>
  function fetchImage(url) {
    return new Promise((resolve, reject) => {
      const img = new Image();
      img.onload = () => resolve(img.src);
      img.onerror = reject;
      img.src = url;
    });
  }

  fetchImage('image.jpg')
    .then(src => {
      document.getElementById('myImage').src = src;
    })
    .catch(error => {
      console.error('画像の読み込みエラー:', error);
    });
</script>

まとめ

JavaScriptでimg srcが変わらない問題は、いくつかの原因と解決策があります。上記の内容を参考に、原因を特定し適切な対策を施すことで、JavaScriptで画像を動的に変更することができます。

参考文献

関連QA

質問	回答
src属性にタイムスタンプを追加しても画像が更新されない場合は？	サーバー側のキャッシュ設定を確認してください。サーバー側でキャッシュが有効になっている場合は、タイムスタンプを追加してもキャッシュされた画像が返却される可能性があります。
画像のパスは正しいのに読み込みエラーが発生する場合は？	画像ファイルのパーミッションを確認してください。Webサーバーが画像ファイルにアクセスできない場合は、読み込みエラーが発生します。
非同期処理で画像URLを取得する際に、エラーが発生した場合は？	エラー処理を実装し、エラー発生時に適切な処理を行うようにしてください。例えば、デフォルトの画像を表示したり、エラーメッセージを表示したりすることができます。

その他の参考記事:jquery img src 変更