springboot框架thymeleaf引擎中前端img标签引入照片怎么写
在Spring Boot框架中使用Thymeleaf引擎引入前端的<img>标签时，可以按照以下方式编写代码。
假设你有一个图片存放在src/main/resources/static/images目录下，你可以这样引入图片：
<img th:src="@{/images/your-image.jpg}" alt="描述文字" />
这里的@{/images/your-image.jpg}表示图片的相对路径，Thymeleaf会在运行时解析并替换成正确的URL。
示例代码
假设你的图片文件名为logo.png，你的HTML文件可能如下所示：
html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>示例页面</title>
</head>
<body>
<h1>欢迎来到我的网站</h1>
<img th:src="@{/images/logo.png}" alt="网站logo" />
</body>
</html>
目录结构
确保你的项目目录结构类似于以下内容：
your-project
├── src
│ ├── main
│ │ ├── java
│ │ ├── resources
│ │ │ ├── static
│ │ │ │ └── images
│ │ │ │ └── logo.png
│ │ │ └── templates
│ │ │ └── your-template.html
Controller层代码
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class touxiangController {
@GetMapping("/touxiang")
public String showImage() {
return "touxiang"; // 返回的视图名
}
}注意事项
- 静态资源访问：Spring Boot 默认会从
src/main/resources/static目录提供静态资源，确保你的图片存放在这个目录下。 - 缓存问题：如果修改了图片但浏览器没有更新，请尝试清除浏览器缓存，或在图片URL后加上版本参数，例如
logo.png?v=1.0，来避免缓存问题。
这样，你就可以在Thymeleaf模板中正确引入图片了！
但是有可能会遇到404无法访问资源
在Spring Boot中引入图片时遇到404错误，通常是由于资源路径配置错误或项目结构不当造成的。以下是一些解决方法和注意事项，以帮助你排查和解决问题。
1. 确保目录结构正确
Spring Boot默认从src/main/resources/static、src/main/resources/public、src/main/resources/resources和src/main/resources/META-INF/resources目录提供静态资源。请确保你的项目结构如下：
your-project
└── src
└── main
└── resources
├── static
│ └── img
│ └── gallery-photo
│ └── 111.png
└── templates
└── your-template.html
2. 使用正确的HTML引用路径
在你的HTML模板中，确保使用正确的路径来引用图片。
使用Thymeleaf（推荐）
<img th:src="@{/img/gallery-photo/111.png}" alt="示例图片" />
直接使用HTML
<img src="/img/gallery-photo/111.png" alt="示例图片" />
注意：在使用直接HTML引用时，路径应该以
/开头，表示根路径。
3. 检查Spring Security配置
如果你的Spring Boot应用使用了Spring Security，可能会限制对静态资源的访问。你可以在Security配置中放宽对静态资源的访问，例如：
@Override
protected void configure(HttpSecurity http) throws Exception {
http
.authorizeRequests()
.antMatchers("/img/**").permitAll() // 允许访问/img/路径下的资源
.anyRequest().authenticated();
}
4. 清理和重启项目
有时IDE的缓存或构建工具的问题可能导致404错误。尝试以下操作：
- 清理项目并重新构建。
- 重启你的Spring Boot应用。
5. 直接访问静态资源
在浏览器中尝试直接访问静态资源的URL，以确保它可以被访问：
http://localhost:8080/img/gallery-photo/111.png
如果能够成功访问，说明路径和配置是正确的。如果还是404错误，检查文件路径和文件名是否完全匹配。
6. 检查控制台和日志
查看控制台输出和日志，检查是否有相关的错误信息，可能会指示出问题的根源。
7. 检查浏览器缓存
有时，浏览器的缓存可能导致无法正确加载最新的资源。尝试清除浏览器缓存，或在无痕模式下访问页面。
8. 确保文件存在
确保你的静态资源（如图片）确实存在于指定的目录下。可以通过文件管理器直接检查文件路径。
9. 使用RESTful API
如果你使用的是RESTful API返回图片的内容，也可以使用ResponseEntity返回图片数据，确保路径和返回类型正确。
（但是文件夹命名一般不带特殊符号，我上边带了一个”-”）
正题开始：
而我遇到的问题是一个容易被忽略，而且新手非常容易犯的错误！！！！通配符问题
springboot框架使用thymeleaf引擎我们需要导入依赖，然后在application.properties中配置路径
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML5
spring.mvc.static-path-pattern=/static/**spring.mvc.static-path-pattern=/static/**
这是配置静态资源路径，最后的**就是通配符，我之前一直把它写为*
那二者的区别是什么呢
1. 通配符的基本概念
-
*（星号）：表示匹配一个层级的文件或包。这意味着它只能匹配当前层级的内容，而不能跨越多个层级。 -
**（双星号）：表示匹配多个层级的文件或包。它可以匹配当前层级及所有子层级的内容，非常灵活。
2. 在包名中的使用
在Spring Boot的配置文件（如 application.properties 或 application.yml）中，我们经常需要指定要扫描的包名。在这种情况下，* 和 ** 的用法如下：
2.1 * 示例
my.packages=com.example.*
在这个例子中，com.example.* 表示匹配 com.example 包下的所有子包，例如 com.example.service 和 com.example.controller。但是，它不会匹配 com.example.service.impl，因为 * 只匹配一个层级。
2.2 ** 示例
my.packages=com.example.**
这里，com.example.** 表示匹配 com.example 包及其所有子包，无论深度如何。这意味着它将匹配 com.example.service、com.example.controller 以及 com.example.service.impl 等所有子包。
3. 在资源文件路径中的使用
除了包名的匹配，通配符还可以用于指定资源文件的路径。在这种情况下，* 和 ** 的用法也有明显的区别。
3.1 * 示例
my.resources=classpath:/static/*
在这个例子中，classpath:/static/* 表示匹配 static 目录下的所有文件，但不包括子目录中的文件。例如，它可以匹配 static/image.png，但无法匹配 static/images/photo.jpg。
3.2 ** 示例
my.resources=classpath:/static/**
在这里，classpath:/static/** 表示匹配 static 目录下的所有文件及所有子目录中的文件。这意味着它会匹配 static/image.png、static/images/photo.jpg、static/images/gallery/picture.jpg 等所有文件。
4. 总结
通配符 * 和 ** 在Spring Boot中具有不同的用途，了解它们的区别可以帮助我们更好地管理包名和资源文件的匹配。
*：匹配一个层级，常用于包名匹配，限制较多。**：匹配多个层级，灵活性更高，适用于资源路径的匹配。
通过正确使用这些通配符，我们可以更高效地组织和管理Spring Boot项目中的包结构和资源文件。这不仅提高了代码的可读性，也使得项目的维护变得更加方便。
希望本文能够帮助你更深入地理解Spring Boot中的通配符用法！如果你有任何问题或想法，欢迎在下方评论区分享。
