php小编西瓜在这篇文章中将向大家介绍如何使用thymeleaf将图像添加到html页面。thymeleaf是一个流行的服务器端java模板引擎，它允许我们在html页面中使用动态数据。添加图像是网页设计中常见的需求，thymeleaf提供了简单而强大的功能来实现这一目标。在接下来的内容中，我们将学习如何使用thymeleaf标签和表达式来引用和显示图像。无论你是初学者还是有经验的开发者，本文都将为你提供有用的指导，让你轻松地将图像添加到html页面中。
问题内容
我的问题是我的 thymeleaf 块在 html 页面上不显示图像和快捷方式图标
我尝试使用文件路径：
登录后复制
并且还尝试使用rest api：
登录后复制
有控制器：
立即学习“前端免费学习笔记（深入）”；
@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 classpathuri location = getclass().getclassloader().getresource("static/logo.png").touri();// get filepath file = paths.get(location);// read bytesreturn new bytearrayresource(files.readallbytes(file));
登录后复制
由于从文件中检索资源是一项常见任务，因此您实际上不必读取字节。您可以使用 filesystemresource 代替 bytearrayresource：
// get location from classpathuri location = getclass().getclassloader().getresource("static/logo.png").touri();// get filepath 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}:
登录后复制
如果这不起作用，那么：
您可能错误配置了构建工具，未在类路径中包含 src/main/resources。您可能已将 spring boot 配置为不自动提供 classpath:static/ 或 classpath:public/ 内的任何内容。
以上就是如何使用 Thymeleaf 将图像添加到 html 页面？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2621962.html
