teratail
回答率
85.30%
質問するログイン新規登録
トップに関する質問Spring5 + ThymeleafでCSS反映させたい

編集履歴

質問編集履歴

3

imageは読み込むことに成功しました！あとは、cssファイルだけです

2019/07/08 22:49

投稿

Saggitarie
Saggitarie

スコア9

title CHANGED
@@ -1,1 +1,1 @@
1
- Spring5 + ThymeleafでCSSやIMGを反映させたい
1
+ Spring5 + ThymeleafでCSS反映させたい
body CHANGED
@@ -1,29 +1,28 @@
1
1
  ### 前提・実現したいこと
2
- ※すみません、いまだにアクセスが出来ません。
2
+ ※imageフォルダを「webapp/image」に移動したら解決しました。
3
3
 
4
4
  Spring 5 + Spring Security + Thymeleaf + BootstrapでECサイトを作成しています。
5
- ローカルに置いてあるimageファイルやcssファイルを読み込みたいのですが、うまく反映されません。
5
+ ローカルに置いてあるcssファイルを読み込みたいのですが、未だにうまく反映されません。
6
6
 
7
7
 
8
8
  ### 発生している問題・エラーメッセージ
9
9
 
10
10
  ```
11
- Failed to load resource: the server responded with a status of 404 ()
11
+ Failed to load resource: the server responded with a status of 404 () style.css
12
- logo.png:1 Failed to load resource: the server responded with a status of 404 ()
13
- style.css:1 Failed to load resource: the server responded with a status of 404 ()
14
12
  ```
15
13
 
16
14
  Chrome上でソースを見てリンクを押すと404エラーが発生します。パスがあっていないことはわかるのですが、Spring上でどのようにpathを指定すればいいのかわかりません。
17
15
 
18
16
  ### 該当のソースコード
19
17
 
20
- 1) Web MVC Config
18
+ 1) Web Security Config
21
19
  ```Spring
22
20
  @Override
23
21
  public void configure(WebSecurity web) throws Exception {
22
+ // セキュリティ設定を無視するリクエスト設定
24
- // Enable access to my local static resources
23
+ // 静的リソースに対するアクセスはセキュリティ設定を無視する
25
24
 
26
- web.ignoring().antMatchers("/resources/**", "/static/**", "/css/**", "/js/**", "/images/**", "/vendor/**", "/fonts/**");
25
+ web.ignoring().antMatchers("/resources/**", "/resource/**", "/css/**", "/js/**", "/images/**", "/vendor/**", "/fonts/**");
27
26
  }
28
27
 
29
28
  @Override
@@ -53,42 +52,54 @@
53
52
  }
54
53
  ```
55
54
 
56
- 2) Web Security Config
55
+ 2) Web MVC Config
57
56
  ```Spring
58
- @Bean
57
+ @Bean
59
- public SpringTemplateEngine templateEngine() {
60
- SpringTemplateEngine engine = new SpringTemplateEngine();
61
- //engine.addDialect(new SpringSecurityDialect());
62
- engine.setTemplateResolver(templateResolver());
58
+ public SpringResourceTemplateResolver templateResolver() {
59
+ SpringResourceTemplateResolver templateResolver = new SpringResourceTemplateResolver();
60
+ //ビューを保存するフォルダ名を指定する
61
+ templateResolver.setPrefix("WEB-INF/templates/");
62
+ //ビューの拡張子を指定する
63
+ templateResolver.setSuffix(".html");
64
+ //テンプレートモードをHTMLに指定する
65
+ //templateResolver.setTemplateMode(TemplateMode.HTML);
66
+ templateResolver.setTemplateMode("HTML5");
67
+ //テンプレート読み込み時の文字コードを指定する
68
+ templateResolver.setCharacterEncoding(StandardCharsets.UTF_8.name());
63
- return engine;
69
+ return templateResolver;
64
- }
70
+ }
65
71
 
66
- @Bean
72
+ @Bean
67
- public ThymeleafViewResolver thymeleafViewResolver() {
68
- ThymeleafViewResolver viewResolver = new ThymeleafViewResolver();
69
- viewResolver.setTemplateEngine(templateEngine());
73
+ public SpringTemplateEngine templateEngine() {
74
+ SpringTemplateEngine engine = new SpringTemplateEngine();
70
- viewResolver.setCharacterEncoding("UTF-8");
75
+ //engine.addDialect(new SpringSecurityDialect());
71
- viewResolver.setOrder(1);
76
+ engine.setTemplateResolver(templateResolver());
72
- return viewResolver;
77
+ return engine;
73
- }
78
+ }
74
79
 
75
- /**
76
- * Using Custom Resource Path
77
- */
80
+ @Bean
78
- public void addResourceHandlers(ResourceHandlerRegistry registry) {
81
+ public ThymeleafViewResolver thymeleafViewResolver() {
82
+ ThymeleafViewResolver viewResolver = new ThymeleafViewResolver();
83
+ viewResolver.setTemplateEngine(templateEngine());
84
+ //ビューを書き出す際の文字コードを指定する
85
+ viewResolver.setCharacterEncoding("UTF-8");
86
+ viewResolver.setOrder(1);
87
+ return viewResolver;
88
+ }
79
89
 
90
+ /**
91
+ * CSSなどの静的コンテンツを利用するための設定を記述する。
92
+ */
93
+ public void addResourceHandlers(ResourceHandlerRegistry registry) {
94
+
80
- // Register resource handler for CSS and JS
95
+ // Register resource handler for CSS and JS
81
- if (!registry.hasMappingForPattern("/resources/**")) {
82
- registry.addResourceHandler("/resources/**").addResourceLocations("/resources/**")
96
+ registry.addResourceHandler("resource/**").addResourceLocations("classpath:/static")
83
- .setCacheControl(CacheControl.maxAge(2, TimeUnit.HOURS).cachePublic());
97
+ .setCacheControl(CacheControl.maxAge(2, TimeUnit.HOURS).cachePublic());
84
- }
85
98
 
86
- // Register resource handler for images
99
+ // Register resource handler for images
87
- if (!registry.hasMappingForPattern("/images/**")) {
88
- registry.addResourceHandler("/images/**").addResourceLocations("/images/**")
100
+ registry.addResourceHandler("/images/**").addResourceLocations("/WEB-INF/images/")
89
- .setCacheControl(CacheControl.maxAge(2, TimeUnit.HOURS).cachePublic());
101
+ .setCacheControl(CacheControl.maxAge(2, TimeUnit.HOURS).cachePublic());
90
- }
102
+ }
91
- }
92
103
  ```
93
104
 
94
105
  3) ビュー（Thymeleafで読み込み）
@@ -108,7 +119,9 @@
108
119
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
109
120
  integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
110
121
 
111
- <link rel="stylesheet" th:href="@{/css/style.css}" type="text/css" />
122
+ <!--<link rel="stylesheet" th:src="@{/css/style.css}" type="text/css"/>-->
123
+
124
+ <link href="/css/style.css" th:href="@{/css/style.css}" rel="stylesheet">
112
125
  ```
113
126
 
114
127
  ```HTML
@@ -165,10 +178,12 @@
165
178
  </div>
166
179
  </div>
167
180
  </div>
168
- </div>
169
- <div class="col-md-2">
170
- <img th:src="@{/images/logo.png}"/>
171
181
  </div>
182
+ <div class="col-sm-2">
183
+ <div class="logo">
184
+ <img th:src="@{/images/logo.png}"/>
185
+ </div>
186
+ </div>
172
187
  </div>
173
188
  </div>
174
189
  ```
@@ -185,9 +200,9 @@
185
200
  5) https://stackoverflow.com/questions/26283670/spring-mvc-issue-with-loading-of-resources-images-css
186
201
 
187
202
  ### 補足情報（FW/ツールのバージョンなど）
188
- フォルダ構成です。
189
- ![イメージ説明](ed9e2ac66d1d5e8aab3a74440e767617.png)
190
203
 
204
+ ![フォルダ構成](9facbd9ead993c381f250689e9d0151c.png)
205
+
191
206
  ちなみに、Spring Bootは使用していません。
192
207
 
193
208
  使用しているIDE：IntelliJ

2

エラーの内容を変更と使用しているIDEを追記

2019/07/08 22:48

投稿

Saggitarie
Saggitarie

スコア9

title CHANGED
File without changes
body CHANGED
@@ -1,5 +1,5 @@
1
1
  ### 前提・実現したいこと
2
- ※一日考えましたが、やはりうまくいきません。
2
+ ※すみません、いまだにアクセスが出来ません。
3
3
 
4
4
  Spring 5 + Spring Security + Thymeleaf + BootstrapでECサイトを作成しています。
5
5
  ローカルに置いてあるimageファイルやcssファイルを読み込みたいのですが、うまく反映されません。
@@ -8,7 +8,9 @@
8
8
  ### 発生している問題・エラーメッセージ
9
9
 
10
10
  ```
11
- Refused to apply style from 'http://localhost:8080/springwebapp/src/main/resources/statics/css/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
11
+ Failed to load resource: the server responded with a status of 404 ()
12
+ logo.png:1 Failed to load resource: the server responded with a status of 404 ()
13
+ style.css:1 Failed to load resource: the server responded with a status of 404 ()
12
14
  ```
13
15
 
14
16
  Chrome上でソースを見てリンクを押すと404エラーが発生します。パスがあっていないことはわかるのですが、Spring上でどのようにpathを指定すればいいのかわかりません。
@@ -188,4 +190,6 @@
188
190
 
189
191
  ちなみに、Spring Bootは使用していません。
190
192
 
193
+ 使用しているIDE：IntelliJ
194
+
191
195
  ご教授よろしくお願いします。

1

「試したこと」のコラムに私が実際に調べて参考にしようとしたサイトのリストを追記。

2019/07/07 21:07

投稿

Saggitarie
Saggitarie

スコア9

title CHANGED
File without changes
body CHANGED
@@ -1,4 +1,5 @@
1
1
  ### 前提・実現したいこと
2
+ ※一日考えましたが、やはりうまくいきません。
2
3
 
3
4
  Spring 5 + Spring Security + Thymeleaf + BootstrapでECサイトを作成しています。
4
5
  ローカルに置いてあるimageファイルやcssファイルを読み込みたいのですが、うまく反映されません。
@@ -14,57 +15,81 @@
14
15
 
15
16
  ### 該当のソースコード
16
17
 
18
+ 1) Web MVC Config
17
- ```Java
19
+ ```Spring
18
- @Bean
20
+ @Override
19
- public SpringResourceTemplateResolver templateResolver() {
21
+ public void configure(WebSecurity web) throws Exception {
20
- SpringResourceTemplateResolver templateResolver = new SpringResourceTemplateResolver();
21
- //ビューを保存するフォルダ名を指定する
22
- templateResolver.setPrefix("WEB-INF/templates/");
23
- //ビューの拡張子を指定する
24
- templateResolver.setSuffix(".html");
25
- //テンプレートモードをHTMLに指定する
26
- //templateResolver.setTemplateMode(TemplateMode.HTML);
22
+ // Enable access to my local static resources
27
- templateResolver.setTemplateMode("HTML5");
28
- //テンプレート読み込み時の文字コードを指定する
29
- templateResolver.setCharacterEncoding(StandardCharsets.UTF_8.name());
30
- return templateResolver;
31
- }
32
23
 
33
- @Bean
34
- public SpringTemplateEngine templateEngine() {
35
- SpringTemplateEngine engine = new SpringTemplateEngine();
36
- //engine.addDialect(new SpringSecurityDialect());
24
+ web.ignoring().antMatchers("/resources/**", "/static/**", "/css/**", "/js/**", "/images/**", "/vendor/**", "/fonts/**");
37
- engine.setTemplateResolver(templateResolver());
38
- return engine;
39
- }
25
+ }
40
26
 
41
- @Bean
27
+ @Override
42
- public ThymeleafViewResolver thymeleafViewResolver() {
43
- ThymeleafViewResolver viewResolver = new ThymeleafViewResolver();
28
+ protected void configure(AuthenticationManagerBuilder auth) throws Exception {
29
+ auth.eraseCredentials(true)
44
- viewResolver.setTemplateEngine(templateEngine());
30
+ .userDetailsService(userDetailsService)
45
- //ビューを書き出す際の文字コードを指定する
46
- viewResolver.setCharacterEncoding("UTF-8");
47
- viewResolver.setOrder(1);
31
+ .passwordEncoder(passwordEncoder());
48
- return viewResolver;
32
+ //add our users for in memory authentication
49
- }
50
33
 
51
- /**
52
- * CSSなどの静的コンテンツを利用するための設定を記述する。
53
- */
34
+ }
54
- public void addResourceHandlers(ResourceHandlerRegistry registry) {
55
- // registry.addResourceHandler("/resources/**")
56
- // .addResourceLocations("/resources/**");
57
-
58
- // Register resource handler for CSS and JS
59
- registry.addResourceHandler("/resources/**").addResourceLocations("classpath:/static/", "D:/static/")
60
- .setCacheControl(CacheControl.maxAge(2, TimeUnit.HOURS).cachePublic());
61
35
 
62
- // Register resource handler for images
36
+ @Override
63
- registry.addResourceHandler("/images/**").addResourceLocations("/WEB-INF/images/")
64
- .setCacheControl(CacheControl.maxAge(2, TimeUnit.HOURS).cachePublic());
37
+ protected void configure(HttpSecurity http) throws Exception {
38
+ http.authorizeRequests()
39
+ .antMatchers("/").permitAll()
40
+ .anyRequest().authenticated()
41
+ .and()
42
+ .formLogin()
43
+ .loginPage("/index")
44
+ .permitAll()
45
+ .usernameParameter("userName")
46
+ .passwordParameter("password")
47
+ .loginProcessingUrl("/authenticate")
48
+ .defaultSuccessUrl("/result")
49
+ .failureUrl("/login/failure")
50
+ ;
65
- }
51
+ }
66
52
  ```
67
53
 
54
+ 2) Web Security Config
55
+ ```Spring
56
+ @Bean
57
+ public SpringTemplateEngine templateEngine() {
58
+ SpringTemplateEngine engine = new SpringTemplateEngine();
59
+ //engine.addDialect(new SpringSecurityDialect());
60
+ engine.setTemplateResolver(templateResolver());
61
+ return engine;
62
+ }
63
+
64
+ @Bean
65
+ public ThymeleafViewResolver thymeleafViewResolver() {
66
+ ThymeleafViewResolver viewResolver = new ThymeleafViewResolver();
67
+ viewResolver.setTemplateEngine(templateEngine());
68
+ viewResolver.setCharacterEncoding("UTF-8");
69
+ viewResolver.setOrder(1);
70
+ return viewResolver;
71
+ }
72
+
73
+ /**
74
+ * Using Custom Resource Path
75
+ */
76
+ public void addResourceHandlers(ResourceHandlerRegistry registry) {
77
+
78
+ // Register resource handler for CSS and JS
79
+ if (!registry.hasMappingForPattern("/resources/**")) {
80
+ registry.addResourceHandler("/resources/**").addResourceLocations("/resources/**")
81
+ .setCacheControl(CacheControl.maxAge(2, TimeUnit.HOURS).cachePublic());
82
+ }
83
+
84
+ // Register resource handler for images
85
+ if (!registry.hasMappingForPattern("/images/**")) {
86
+ registry.addResourceHandler("/images/**").addResourceLocations("/images/**")
87
+ .setCacheControl(CacheControl.maxAge(2, TimeUnit.HOURS).cachePublic());
88
+ }
89
+ }
90
+ ```
91
+
92
+ 3) ビュー（Thymeleafで読み込み）
68
93
  ```HTML
69
94
  <!doctype html>
70
95
  <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
@@ -81,67 +106,10 @@
81
106
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
82
107
  integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
83
108
 
84
- <link href="resources/statics/css/style.css" type="text/css" th:href="@{src/main/resources/statics/css/style.css}" rel="stylesheet" />
109
+ <link rel="stylesheet" th:href="@{/css/style.css}" type="text/css" />
110
+ ```
85
111
 
86
- <style>
87
- .bd-placeholder-img {
88
- font-size: 1.125rem;
89
- text-anchor: middle;
90
- -webkit-user-select: none;
91
- -moz-user-select: none;
92
- -ms-user-select: none;
93
- user-select: none;
94
- }
95
-
96
- @media (min-width: 768px) {
97
- .bd-placeholder-img-lg {
98
- font-size: 3.5rem;
99
- }
100
- }
101
-
102
- div .container .col-sm-10 .carousel slide .carousel-inner img {
103
- height: 100px;
104
- }
105
- </style>
106
-
107
-
108
- </head>
109
- <body>
112
+ ```HTML
110
-
111
- <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
112
- <a class="navbar-brand" href="#">Navbar</a>
113
- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample09"
114
- aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation">
115
- <span class="navbar-toggler-icon"></span>
116
- </button>
117
-
118
- <div class="collapse navbar-collapse" id="navbarsExample09">
119
- <ul class="navbar-nav mr-auto">
120
- <li class="nav-item active">
121
- <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
122
- </li>
123
- <li class="nav-item">
124
- <a class="nav-link" href="#">Link</a>
125
- </li>
126
- <li class="nav-item">
127
- <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
128
- </li>
129
- <li class="nav-item dropdown">
130
- <a class="nav-link dropdown-toggle" href="#" id="dropdown09" data-toggle="dropdown"
131
- aria-haspopup="true" aria-expanded="false">Dropdown</a>
132
- <div class="dropdown-menu" aria-labelledby="dropdown09">
133
- <a class="dropdown-item" href="#">Action</a>
134
- <a class="dropdown-item" href="#">Another action</a>
135
- <a class="dropdown-item" href="#">Something else here</a>
136
- </div>
137
- </li>
138
- </ul>
139
- <form class="form-inline my-2 my-md-0">
140
- <input class="form-control" type="text" placeholder="Search" aria-label="Search">
141
- </form>
142
- </div>
143
- </nav>
144
-
145
113
  <div class="container">
146
114
  <div class="row">
147
115
  <!-- Carousal -->
@@ -205,8 +173,19 @@
205
173
 
206
174
  ### 試したこと
207
175
 
208
- 絶対パスを指定しましたが読み込めませんでした。
176
+ 以下のStackFlow のサイトの方法で解決を試みましたが、完璧に詰んでいます。
177
+ 初歩的な質問で申し訳ないですが、どこが間違えているのか検討がつきません。
209
178
 
179
+ 1)https://stackoverflow.com/questions/50792837/thymeleaf-3-spring-5-load-css
180
+ 2)https://stackoverflow.com/questions/54848419/cant-load-my-css-when-using-spring-security-and-thymeleaf
181
+ 3)https://stackoverflow.com/questions/54844592/unable-to-add-css-file-in-spring-and-thymeleaf
182
+ 4)https://stackoverflow.com/questions/29562471/springboot-with-thymeleaf-css-not-found
183
+ 5) https://stackoverflow.com/questions/26283670/spring-mvc-issue-with-loading-of-resources-images-css
184
+
210
185
  ### 補足情報（FW/ツールのバージョンなど）
186
+ フォルダ構成です。
187
+ ![イメージ説明](ed9e2ac66d1d5e8aab3a74440e767617.png)
211
188
 
212
- ![イメージ説明](e3e7e8f081cbf3f1b3e93df0f19f3188.png)
189
+ ちなみに、Spring Bootは使用していません。
190
+
191
+ ご教授よろしくお願いします。