You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何使用Thymeleaf实现图片作为超链接?

解决Thymeleaf中图片作为超链接的问题

嘿,我来帮你搞定这个问题!你遇到的情况大概率是图片路径没有用Thymeleaf的语法正确解析,或者路径本身的写法不对,导致图片加载异常——看起来像是链接没生效,其实可能是图片显示不出来,让你误以为链接没作用。下面给你两种场景的正确写法:

1. 内部项目链接(跳转到/user/myUser)

你的<a>标签th:href写法没问题,但<img>src必须用Thymeleaf的@{...}语法来引用静态资源。因为Spring Boot的静态资源默认放在src/main/resources/static目录下,直接写相对路径../../static/images/...会让Thymeleaf无法正确解析路径。正确代码如下:

<a th:href="@{/user/myUser}">
    <img th:src="@{/images/image.jpg}" alt="logo"/>
</a>

2. 外部网站链接

外部链接可以直接用原生的href属性,但图片路径依然要遵循Thymeleaf的静态资源引用规则,这样才能保证在不同环境下都能正确加载:

<a href="https://www.w3schools.com">
    <img th:src="@{/images/image.jpg}" alt="logo"/>
</a>

额外提醒

要确保你的image.jpg确实放在src/main/resources/static/images/目录下,这是Spring Boot静态资源的默认存放位置,Thymeleaf才能通过@{/images/image.jpg}正确找到它。如果图片路径不对,就算链接本身是好的,图片显示不出来也会让你误以为链接没生效哦~

内容的提问来源于stack exchange,提问作者ceid-vg

火山引擎 最新活动