Help us understand the problem. What is going on with this article?

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

困ったこと

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

画像のアップロード方法

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

 解決方法

  1. ルートフォルダ直下にフォルダ(仮に、imagesとする)を作る
    今回は、RamenKingdomというルートフォルダの直下にimagesを作成しています。
    スクリーンショット 2020-07-12 15.17.29.png

  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配下には格納しない!!!

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

dumbbell
大学在学中にアメリカ学部留学とフィリピン長期インターンを経験。現在、サーバーサイドエンジニアとして働いています。トレーニングも好きです。よろしくお願いします!
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away