springboot 框架 thymeleaf 引擎中前端 img 标签引入照片怎么写

 

在 Spring Boot 框架中使用 Thymeleaf 引擎引入前端的 标签时，可以按照以下方式编写代码。

假设你有一个图片存放在 src/main/resources/static/images 目录下，你可以这样引入图片：

这里的 @{/images/your-image.jpg} 表示图片的相对路径，Thymeleaf 会在运行时解析并替换成正确的 URL。

示例代码

假设你的图片文件名为logo.png，你的 HTML 文件可能如下所示：

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"; // 返回的视图名}


}

注意事项

1. 静态资源访问：Spring Boot 默认会从 src/main/resources/static 目录提供静态资源，确保你的图片存放在这个目录下。
2. 缓存问题：如果修改了图片但浏览器没有更新，请尝试清除浏览器缓存，或在图片 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（推荐）

直接使用 HTML

注意 ：在使用直接 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 中的通配符用法！如果你有任何问题或想法，欢迎在下方评论区分享。