在Thymeleaf模板引擎中，img标签是用于在HTML页面中嵌入图片的常用标签。通过合理使用img标签，你可以轻松地在你的页面中展示图片，并对其进行尺寸和路径的设置。下面，我将详细介绍如何在Thymeleaf中使用img标签，以及如何调整图片尺寸和路径。
1. 基本用法
在Thymeleaf中，img标签的基本语法如下：
<img th:src="@{path/to/image}" alt="描述性文字" />
th:src="@{path/to/image}"：这是Thymeleaf的属性表达式，用于指定图片的路径。@{}是Thymeleaf的命名空间前缀，path/to/image是图片的相对路径或绝对路径。alt：图片无法显示时，浏览器会显示这个属性中的文字作为替代。
2. 图片路径设置
图片路径可以是相对路径或绝对路径：
- 相对路径：相对于当前页面的路径，例如
/images/logo.png。 - 绝对路径：完整的URL，例如
http://example.com/images/logo.png。
在Thymeleaf中，你可以使用@{/}来获取当前应用的上下文路径：
<img th:src="@{/images/logo.png}" alt="Logo" />
3. 图片尺寸设置
Thymeleaf本身不提供直接设置图片尺寸的功能，但你可以通过CSS来实现：
3.1 使用CSS类
首先，在CSS文件中定义一个包含尺寸的类：
.image-responsive {
width: 100px; /* 宽度 */
height: auto; /* 高度自动 */
}
然后，在img标签中添加这个类：
<img th:src="@{/images/logo.png}" alt="Logo" class="image-responsive" />
3.2 使用CSS样式
你也可以直接在img标签中添加CSS样式：
<img th:src="@{/images/logo.png}" alt="Logo" style="width: 100px; height: auto;" />
4. 高分辨率图片
如果你需要展示高分辨率的图片，可以使用srcset属性：
<img th:src="@{/images/logo.png}"
th:srcset="@{/images/logo.png 1x},
@{/images/logo@2x.png 2x},
@{/images/logo@3x.png 3x}"
alt="Logo" />
这个属性允许浏览器根据屏幕的像素密度选择合适的图片资源。
5. 总结
通过以上介绍，相信你已经掌握了在Thymeleaf中使用img标签的方法，以及如何设置图片路径和尺寸。在实际开发中，合理运用这些技巧，可以使你的页面更加美观和高效。