Question

我已经阅读了stackoverflow和其他网站上的许多文章，以便将我的CSS文件和图像加载到我的Spring MVC应用程序中。但是，我总是收到严格的MIME类型错误。（现在让我很烦。）

我需要帮助！！

我已阅读以下文章以寻求解决方案。

1）thymeleaf 3 spring 5 load css

2）Can't load my css when using spring security and thymeleaf

3）Unable to add css file in spring and thymeleaf

4）SpringBoot with Thymeleaf - css not found

5）Spring mvc issue with loading of resources (images/css)

1）WebSecurityConfigApp

    @Override
    public void configure(WebSecurity web) throws Exception {
        // Enable access to my local static resources

        web.ignoring().antMatchers("/resources/**", "/static/**", "/css/**", "/js/**", "/images/**", "/vendor/**", "/fonts/**");
    }

    @Override
    protected void configure(AuthenticationManagerBuilder auth) throws Exception {
        auth.eraseCredentials(true)
                .userDetailsService(userDetailsService)
                .passwordEncoder(passwordEncoder());
        //add our users for in memory authentication

    }

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.authorizeRequests()
                .antMatchers("/").permitAll()
                .anyRequest().authenticated()
                .and()
                .formLogin()
                .loginPage("/index")
                .permitAll()
                .usernameParameter("userName")
                .passwordParameter("password")
                .loginProcessingUrl("/authenticate")
                .defaultSuccessUrl("/result")
                .failureUrl("/login/failure")
        ;
    }

2）我的MVCConfigFile

    @Bean
    public SpringTemplateEngine templateEngine() {
        SpringTemplateEngine engine = new SpringTemplateEngine();
        //engine.addDialect(new SpringSecurityDialect());
        engine.setTemplateResolver(templateResolver());
        return engine;
    }

    @Bean
    public ThymeleafViewResolver thymeleafViewResolver() {
        ThymeleafViewResolver viewResolver = new ThymeleafViewResolver();
        viewResolver.setTemplateEngine(templateEngine());
        viewResolver.setCharacterEncoding("UTF-8");
        viewResolver.setOrder(1);
        return viewResolver;
    }

    /**
     * Using Custom Resource Path
     */
    public void addResourceHandlers(ResourceHandlerRegistry registry) {

          // Register resource handler for CSS and JS
        if (!registry.hasMappingForPattern("/resources/**")) {
            registry.addResourceHandler("/resources/**").addResourceLocations("/resources/**")
                    .setCacheControl(CacheControl.maxAge(2, TimeUnit.HOURS).cachePublic());
        }

          // Register resource handler for images
        if (!registry.hasMappingForPattern("/images/**")) {
            registry.addResourceHandler("/images/**").addResourceLocations("/images/**")
                    .setCacheControl(CacheControl.maxAge(2, TimeUnit.HOURS).cachePublic());
        }
    }

3）查看（html）

我正在尝试通过以下方式加载我的CSS文件：

<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <meta name="description" content=""/>
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors"/>
    <meta name="generator" content="Jekyll v3.8.5"/>

    <title>Navbar Template · Bootstrap</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <link rel="stylesheet" th:href="@{/static/css/style.css}" type="text/css" />

和我的图片文件

<div class="container">
    <div class="row">
        <!-- Carousal -->
        <div class="col-md-8">
            <div class="panel panel-default">
                <div class="panel-body">
                    <!--カルーセルのタグ。いじるのはオススメしない。-->
                    <div id="carousel-example" class="carousel slide" data-ride="carousel">

                        <!--ここで好きな枚数のスライドを作れる。imgタグのscr内に好きな画像を入れよう。-->
                        <div class="carousel-inner">
                            　　　　　　　　　　　　　　　　　　　　　　　　<!--後ろにactiveをつけたものが最初に表示されるよ。-->
                            <div class="carousel-item active">
                                <img class="d-block w-100" src="http://lorempixel.com/output/sports-q-c-1600-500-1.jpg"
                                     alt="Picture1">
                                <div class="carousel-caption">
                                    <h4>First Thumbnail</h4>
                                    <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots
                                        in a
                                        piece of classical Latin literature from 45 BC, making it over 2000 years
                                        old. </p>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <img class="d-block w-100" src="http://lorempixel.com/output/sports-q-c-1600-500-3.jpg"
                                     alt="Picture2">
                            </div>
                            <div class="carousel-item">
                                <img class="d-block w-100" src="http://lorempixel.com/output/sports-q-c-1600-500-2.jpg"
                                     alt="Picture3">
                            </div>
                        </div>

                        <!--これはスライドの「進むボタン」と「戻るボタン」。いらないなら無くていい。-->
                        <a class="carousel-control-prev" href="#carousel-example" role="button" data-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="carousel-control-next" href="#carousel-example" role="button" data-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a>

                        <!--こちらはスライドの枚数や現在地がわかるあれ。いらないならn(ry-->
                        　　　　　　　　　　　
                        <ol class="carousel-indicators">
                            <li data-target="#carousel-example" data-slide-to="0" class="active"></li>
                            <li data-target="#carousel-example" data-slide-to="1"></li>
                            <li data-target="#carousel-example" data-slide-to="2"></li>
                        </ol>
                    </div>
                </div>
            </div>
                </div>
        <div class="col-md-2">
            <img th:src="@{/images/logo.png}"/>
        </div>
    </div>
</div>

无法加载资源：服务器响应状态为404（） 2style.css：1

无法加载资源：服务器的状态为404（）

我的文件夹结构：

Folder Structure

我哪里出错了？

Answer 1

正确的文件夹命名是src/main/resources/static而不是statics。尝试将您的结构更新为该命名。如果您有一天迁移到Spring Boot，则会发现最好符合此约定。

无法在Spring MVC App + Thymeleaf

1 个答案: