问题：

无法在我的Spring MVC应用程序Thymeleaf上加载CSS和图像文件

云欣嘉

2023-03-14

我已经从stackoverflow和其他网站上阅读了许多文章，以便在我的Spring MVC应用程序上加载我的css文件和图像。然而，我总是得到一个严格的MIME类型错误。（现在这让我很恼火。）

我需要帮助，伙计们！！

我已经阅读了下面的文章来寻找解决方案。

1）胸腺3Spring5负载css

2）使用spring security和thymeleaf时无法加载我的css

3）无法在Spring和thymeleaf中添加css文件

4）未找到带胸腺的SpringBoot-css

5）加载资源（图像/css）的Springmvc问题

1）网络安全配置

    @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（）

我的文件夹结构：

文件夹结构

我哪里出错了？

毛缪文

2023-03-14

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

无法在我的Spring MVC应用程序Thymeleaf上加载CSS和图像文件

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档