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 文件,它就会完全崩溃。
传媒企业网站系统使用热腾CMS(RTCMS),根据网站板块定制的栏目,如果修改栏目,需要修改模板相应的标签。站点内容均可在后台网站基本设置中添加。全站可生成HTML,安装默认动态浏览。并可以独立设置SEO标题、关键字、描述信息。源码包中带有少量测试数据,安装时可选择演示安装或全新安装。如果全新安装,后台内容充实后,首页才能完全显示出来。(全新安装后可以删除演示数据用到的图片,目录在https://
所以理想情况下,您应该将控制器重写为:
// 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}:
如果这不起作用,那么:
- 您可能错误配置了构建工具,未在类路径中包含
src/main/resources。 - 您可能已将 spring boot 配置为不自动提供
classpath:static/或classpath:public/内的任何内容。










