使用 <img th:src= "@/images/anabada.jpg" 无法加载 thymeleaf 中的图像
Posted
技术标签:
【中文标题】使用 <img th:src= "@/images/anabada.jpg" 无法加载 thymeleaf 中的图像【英文标题】：images in thyemleaf does not load by using <img th:src= "@/images/anabada.jpeg"使用 <img th:src= "@/images/anabada.jpg" 无法加载 thymeleaf 中的图像 【发布时间】：2020-10-29 03:44:37 【问题描述】：我正在使用带有 gradle build 和 thymeleaf 的 SpringBoot。我想将图像插入到我的 html 文件中。我想插入一个图像（/images/anabada.jpeg）我想我已经为百里香做了正确的
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<title>WS Product Management System</title>
<link rel="icon" th:href="@/images/anabada.jpeg">
<link rel="stylesheet" type="text/css" th:href="@/css/login.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form th:action="@/registration" method="get">
<button class="btn btn-md btn-warning btn-block" type="submit">Go To Registration Page</button>
</form>
<div class="container">
<img th:src="@/images/anabada.jpeg" class="img-responsive center-block" />
<form th:action="@/login" method="POST" class="form-signin" id="login_form" name="login_form">
<h3 class="form-signin-heading">Anabada</h3>
<br/>
<input type="text" id="loginId" name="loginId" th:placeholder="LoginId" class="form-control" /> <br/>
<input type="password" th:placeholder="Password" id="password" name="password" class="form-control" /> <br />
<div align="center" th:if="$param.error">
<p style="font-size: 20; color: #FF1C19;">아이디 패스워드가 올바르지 않거나 비활성화된 회원입니다.</p>
</div>
<div align="center" th:if="$param.authError">
<p style="font-size: 20; color: #FF1C19;">만료된 토큰이거나 토큰값을 갱신하여 주시길 바랍니다.</p>
</div>
<button class="btn btn-lg btn-primary btn-block" name="Submit" value="Login" type="Submit" th:text="Login"></button>
</form>
</div>
</body>
</html>
上面是我的html代码，下面是插入图片的代码，这是上面完整代码的一部分。
<img th:src="@/images/anabada.jpeg" class="img-responsive center-block" />
我的项目文件夹路径。
这是 build.gradle
plugins
id 'org.springframework.boot' version '2.1.1.RELEASE'
id 'java'
id 'war'
apply plugin: 'io.spring.dependency-management'
group = 'com.anabada'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = '1.8'
configurations
compileOnly
extendsFrom annotationProcessor
repositories
mavenCentral()
dependencies
implementation 'org.springframework.boot:spring-boot-starter-aop'
implementation 'org.springframework.boot:spring-boot-starter-jdbc'
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
implementation 'org.springframework.boot:spring-boot-starter-web'
implementation 'org.mybatis.spring.boot:mybatis-spring-boot-starter:2.0.0'
implementation 'org.thymeleaf.extras:thymeleaf-extras-springsecurity5'
compile("org.springframework.boot:spring-boot-starter-security")
compileOnly 'org.projectlombok:lombok'
runtimeOnly 'org.springframework.boot:spring-boot-devtools'
runtimeOnly 'mysql:mysql-connector-java'
annotationProcessor 'org.springframework.boot:spring-boot-configuration-processor'
annotationProcessor 'org.projectlombok:lombok'
providedRuntime 'org.springframework.boot:spring-boot-starter-tomcat'
testImplementation 'org.springframework.boot:spring-boot-starter-test'
这是我的网络配置
package com.anabada.anabada.configuration;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
@EnableWebMvc
public class WebConfig implements WebMvcConfigurer
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry)
registry.addResourceHandler("/css/**").addResourceLocations("/css/");
registry.addResourceHandler("/js/**").addResourceLocations("/js/");
registry.addResourceHandler("/images/**").addResourceLocations("/images/");
@Bean
public BCryptPasswordEncoder passwordEncoder()
BCryptPasswordEncoder bCryptPasswordEncoder = new BCryptPasswordEncoder();
return bCryptPasswordEncoder;
我的安全配置
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.authentication.dao.DaoAuthenticationProvider;
import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder;
import org.springframework.security.config.annotation.method.configuration.EnableGlobalMethodSecurity;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.builders.WebSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.security.web.util.matcher.AntPathRequestMatcher;
import com.anabada.anabada.Member.service.UserService;
@Configuration
@EnableWebSecurity
@EnableGlobalMethodSecurity(prePostEnabled = true)
public class SecurityConfiguration extends WebSecurityConfigurerAdapter
@Autowired
private BCryptPasswordEncoder bCryptPasswordEncoder;
@Autowired
private UserService userService;
@Bean
public DaoAuthenticationProvider authenticationProvider(UserService userService)
DaoAuthenticationProvider authenticationProvider = new DaoAuthenticationProvider();
authenticationProvider.setUserDetailsService(userService);
authenticationProvider.setPasswordEncoder(bCryptPasswordEncoder);
return authenticationProvider;
@Override
protected void configure(AuthenticationManagerBuilder auth)
auth.authenticationProvider(authenticationProvider(userService));
@Override
protected void configure(HttpSecurity http) throws Exception
http
.authorizeRequests()
.antMatchers("/").permitAll()
.antMatchers("/login").permitAll()
.antMatchers("/registration").permitAll()
.antMatchers("/home").hasAuthority("ADMIN") // ADMIN 권한의 유저만 /home 에 접근가능
.anyRequest()
.authenticated()
.and().csrf().disable()
.formLogin()
.loginPage("/login")
.failureUrl("/login?error=true")
.defaultSuccessUrl("/home")
.usernameParameter("loginId")
.passwordParameter("password")
.and()
.logout()
.logoutRequestMatcher(new AntPathRequestMatcher("/logout"))
.and()
.exceptionHandling()
.accessDeniedPage("/access-denied");
@Override
public void configure(WebSecurity web)
web.ignoring().antMatchers("/css/**", "/js/**", "/images/**");
【问题讨论】：
【参考方案1】：鉴于密码编码器，您似乎已启用（或想要）安全性：
@Configuration
@EnableWebSecurity
@EnableGlobalMethodSecurity(prePostEnabled = true)
@NoArgsConstructor @Log4j2
public class WebSecurityConfigurerImpl extends WebSecurityConfigurerAdapter
@Autowired private UserDetailsService userDetailsService;
@Autowired private PasswordEncoder passwordEncoder;
@Override
public void configure(AuthenticationManagerBuilder auth) throws Exception
auth.userDetailsService(userDetailsService)
.passwordEncoder(passwordEncoder);
@Override
public void configure(WebSecurity web)
web.ignoring()
.antMatchers("/css/**", "/js/**", "/images/**",
"/webjars/**", "/webjarsjs");
@Override
protected void configure(HttpSecurity http) throws Exception
http
.authorizeRequests().anyRequest().permitAll()
.and().formLogin().loginPage("/login").permitAll()
.and().logout().permitAll();
【讨论】：
感谢您的回复！我的项目中已经有了 securityConfiguration！尝试从 /images/anabada.jpeg 将图像插入到我的 html 文件中，但仍然无法正常工作。 你的图片在 classpath:/static 下吗？我认为您的配置和我的配置之间的区别在于您为静态资产设置了特定的资源处理程序，而我使用默认配置并告诉 Spring 忽略 /images/** 的安全检查（以及其他不需要安全检查的路径)。以上是关于使用 <img th:src= "@/images/anabada.jpg" 无法加载 thymeleaf 中的图像的主要内容，如果未能解决你的问题，请参考以下文章
thymeleaf中img标签，如果有图片显示图片，没有图片显示默认图片
thymeleaf中img标签，如果有图片显示图片，没有图片显示默认图片