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 而不是图像...
解决方法
问题1：正确读取文件
如果您使用默认配置，则您放入 src/main/resources 的任何内容都会复制到类路径中。因此，您不应在代码中引用 src/main/resources，而应引用类路径本身。
传媒企业网站系统使用热腾CMS(RTCMS),根据网站板块定制的栏目，如果修改栏目，需要修改模板相应的标签。站点内容均可在后台网站基本设置中添加。全站可生成HTML，安装默认动态浏览。并可以独立设置SEO标题、关键字、描述信息。源码包中带有少量测试数据，安装时可选择演示安装或全新安装。如果全新安装，后台内容充实后，首页才能完全显示出来。（全新安装后可以删除演示数据用到的图片，目录在https://
如果您在本地运行，它可能仍然可以工作，但是一旦您在其他地方运行 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" th:src="@{/logo.png}" alt="Logo">
如果这不起作用，那么：
- 您可能错误配置了构建工具，未在类路径中包含
src/main/resources。 - 您可能已将 spring boot 配置为不自动提供
classpath:static/或classpath:public/内的任何内容。
