php小编西瓜在这篇文章中将向大家介绍如何使用Thymeleaf将图像添加到HTML页面。Thymeleaf是一个流行的服务器端Java模板引擎，它允许我们在HTML页面中使用动态数据。添加图像是网页设计中常见的需求，Thymeleaf提供了简单而强大的功能来实现这一目标。在接下来的内容中，我们将学习如何使用Thymeleaf标签和表达式来引用和显示图像。无论你是初学者还是有经验的开发者，本文都将为你提供有用的指导，让你轻松地将图像添加到HTML页面中。
我的问题是我的 thymeleaf 块在 html 页面上不显示图像和快捷方式图标
我尝试使用文件路径：
<img class="logo" th:src="@{src/main/resources/static/logo.png}" alt="logo">并且还尝试使用rest api：
<img class="logo" th:src="@{/api/v1/logo}" alt="logo">有控制器：
@RestController
@RequestMapping("/api/v1/logo")
public class LogoController {
@GetMapping(produces = MediaType.IMAGE_JPEG_VALUE)
public Resource getLogo() throws IOException {
return new ByteArrayResource(Files.toByteArray(new File("src/main/resources/static/logo.png")));
}
}而且我总是得到 alt 而不是图像...
如果您使用默认配置，则您放入 src/main/resources 的任何内容都会复制到类路径中。因此，您不应在代码中引用 src/main/resources，而应引用类路径本身。
如果您在本地运行，它可能仍然可以工作，但是一旦您在其他地方运行 jar 文件，它就会完全崩溃。
所以理想情况下，您应该将控制器重写为：
// get location from classpath
uri location = getclass().getclassloader().getresource("static/logo.png").touri();
// get file
path file = paths.get(location);
// read bytes
return new bytearrayresource(files.readallbytes(file));
由于从文件中检索资源是一项常见任务，因此您实际上不必读取字节。
您可以使用 filesystemresource 代替 bytearrayresource：
// get location from classpath
uri location = getclass().getclassloader().getresource("static/logo.png").touri();
// get file
path file = paths.get(location);
return new filesystemresource(file);
您甚至可以缩短这个时间，因为从类路径检索资源非常常见，因此有一个 classpathresource 类：
return new classpathresource("static/logo.png");
这还不是全部，通常情况下，您需要从类路径提供 web 资源，因此在 spring boot 中， classpath:static/ 文件夹或 classpath:public/ 文件夹中的所有内容都已经在网络。所以通常情况下，您的图像已经可以在 http://localhost:8080/logo.png 上使用，而不需要您的控制器方法。
所以通常您可以完全删除该控制器方法。
这给我们带来了第二个问题。目前，您使用 @{/api/v1/logo} 或 @{src/main/resources/static/logo.png} 引用您的图像。
thymeleaf 将 @{path/to/file} 解释为上下文相关 url，因此它唯一做的就是在上下文路径前面添加上下文路径（如果有的话）并期望该文件在 http://localhost:[serverport ]/[contextpath]/path/to/file。
但正如我们之前所确定的，您的图像应该可以在 http://localhost:8080/logo.png 上找到，因此，您应该使用 @{/logo.png}:
<img class="logo" th:src="@{/logo.png}" alt="Logo">
如果这不起作用，那么：
src/main/resources。classpath:static/ 或 classpath:public/ 内的任何内容。以上是如何使用 Thymeleaf 将图像添加到 html 页面？的详细内容。更多信息请关注PHP中文网其他相关文章！
