1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【Java】 キャッシュの影響でアップロードした画像が更新されない問題

Posted at

##概要
作成中のwebアプリで画像をアップロードしたはいいものの、アップロードした画像が画面で中々更新されない問題で詰まったので、自分用にメモします。
原因としてはキャッシュが悪さをしていて、更新前の画像をそのまま読み込んでしまっているためと思われます。

##解決方法
結論から言ってしまえば、jsp側で表示している画像の"<img src=~"に?(何かしらの値)を付けて、ブラウザに違う画像と認識させるだけで解決する事ができました。

test.jsp
//変更前
<img src="static/img/test.jpg" alt="test.jpg">
//変更後
<img src="static/img/test.jpg?(任意の動的パラメーター)" alt="test.jpg">

画像のURLがまったく同じで何も変更がないと、ブラウザは**「キャッシュを使用すればいい」**と判断してしまうので、更新が反映されなくなっていたようです。

##パラメーターをlastModifiedで付与する
任意の固有のパラメーターなので何でも良いのですが、せっかくなので自動で値を取得して付与するようにしてみます。
アップロードした日付と時間を、lastModifiedで取得し付与します。

Controller.java
// 対象とするファイルを選択する
File file = new File("static/img/test.jpg");
// ファイルの最終更新日時を取得し、jspで使用可能にする
model.addAttribute("file", file.lastModified());
test.jsp
<img src="/static/img/test.jpg?${file}" alt="test.jpg">

これでファイルを更新しても、更新後のものが読み込まれるようになります。

##参考
Spring Bootで静的リソースのブラウザキャッシュ対応
・[「キャッシュのせいです」とは言わせない!更新されたファイルだけ確実にキャッシュを無効化させる方法]
(https://qiita.com/laineus/items/ae9c9117cbcbd5333035)
・[更新されたJS、CSS、画像のみブラウザキャッシュを破棄して読み込ませる]
(https://qiita.com/ka215/items/20139918642fed39fb5d)

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?