Thymeleaf模板中图片src显示unknown问题求助

你遇到的问题是Thymeleaf解析图片路径时，当profileData.profile为null时，else分支的静态资源路径没被正确识别，导致渲染出src(unknown)。这是因为Thymeleaf对th:src属性的解析逻辑需要明确区分变量和静态资源路径。

问题根源 #

你原来的代码里，else分支直接写了相对路径字符串../images/users/app-store.png，但Thymeleaf会把这个字符串当成变量表达式去解析，而不是静态资源路径。当找不到对应的变量时，就会输出unknown。

解决方案 #

我们需要用Thymeleaf的URL语法（@{...}）来包裹静态资源路径，告诉Thymeleaf这是一个需要解析的静态资源地址，而不是变量。同时可以用更简洁的Elvis运算符（?:）替代三元表达式，让代码更清爽：

修正后的代码（Elvis运算符版，推荐）

<img th:src="${profileData.profile} ?: @{../images/users/app-store.png}" alt="" class="img-responsive profile-photo" />

或者用三元表达式的完整写法

<img th:src="${profileData.profile != null} ? ${profileData.profile} : @{../images/users/app-store.png}" alt="" class="img-responsive profile-photo" />

原理说明 #

• @{../images/users/app-store.png}：Thymeleaf会根据项目上下文路径，自动解析成正确的静态资源URL，避免相对路径带来的适配问题。
• Elvis运算符${变量} ?: 默认值：是三元表达式${变量 != null} ? 变量 : 默认值的简写，更贴合Thymeleaf的简洁编码风格。

这样修改后，当profileData.profile为null时，Thymeleaf就会正确渲染出你指定的默认图片路径，不会再出现unknown的情况啦。

内容的提问来源于stack exchange，提问作者Faheem azaz Bhanej