画像はアップロードされたのに、画面には表示されない!?


困ったこと

Spring Bootを使って、画像をアップロードする。
アップロード直後は画像がHTML上に表示されず、30秒程待って画面をリフレッシュすると表示される。

画像のアップロード方法

画像ファイル -> /resource/static/images/配下
ファイル名(xxx-20200712151409.jpgなどのファイル名) -> DBに格納

 解決方法

  1. ルートフォルダ直下にフォルダ(仮に、imagesとする)を作る
    今回は、RamenKingdomというルートフォルダの直下にimagesを作成しています。

  2. WebConfigurationクラス(仮に、AdditionalResourceWebConfigurationとする)を作成

@Configuration
public class AdditionalResourceWebConfiguration implements WebMvcConfigurer {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/images/**").addResourceLocations("file:images/");
    }
}

あとは、画像を格納していたコードをルートフォルダ直下のimagesに変更するだけ。
ただし、HTML上では、下記のようにする必要があります。


<img th:src="@{'/images/' + ${picture.filepath}}"/>

まとめ

今回のように動的に変化するファイルはstatic配下には格納しない!!!

以上です。最後まで読んでくださり、ありがとうございました。