如何使用 Thymeleaf 将图像添加到 html 页面？

php小编西瓜在这篇文章中将向大家介绍如何使用Thymeleaf将图像添加到HTML页面。Thymeleaf是一个流行的服务器端Java模板引擎，它允许我们在HTML页面中使用动态数据。添加图像是网页设计中常见的需求，Thymeleaf提供了简单而强大的功能来实现这一目标。在接下来的内容中，我们将学习如何使用Thymeleaf标签和表达式来引用和显示图像。无论你是初学者还是有经验的开发者，本文都将为你提供有用的指导，让你轻松地将图像添加到HTML页面中。

问题内容

我的问题是我的 thymeleaf 块在 html 页面上不显示图像和快捷方式图标

我尝试使用文件路径：

<img class="logo lazy"  src="/static/imghwm/default1.png"  data-src="@{src/main/resources/static/logo.png}"  th: alt="logo">

并且还尝试使用rest api：

<img class="logo lazy"  src="/static/imghwm/default1.png"  data-src="@{/api/v1/logo}"  th: 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 而不是图像...

解决方法

问题1：正确读取文件

如果您使用默认配置，则您放入 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 上使用，而不需要您的控制器方法。

所以通常您可以完全删除该控制器方法。

问题2：正确引用文件

这给我们带来了第二个问题。目前，您使用 @{/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 lazy"  src="/static/imghwm/default1.png"  data-src="@{/logo.png}"  th: alt="Logo">

如果这不起作用，那么：

• 您可能错误配置了构建工具，未在类路径中包含 src/main/resources。
• 您可能已将 spring boot 配置为不自动提供 classpath:static/ 或 classpath:public/ 内的任何内容。

以上是如何使用 Thymeleaf 将图像添加到 html 页面？的详细内容。更多信息请关注PHP中文网其他相关文章！