Thymeleaf中带变量的服务器相对URL生成语法问题

问题原因 #

你之前的写法错误在于把Thymeleaf变量表达式（${}）直接嵌入到了URL表达式的字符串拼接中，Thymeleaf的@{}语法不会解析内部嵌套的${}表达式，导致变量未被替换直接输出。

正确写法 #

方法1：使用Thymeleaf URL表达式的占位符语法（推荐） #

利用Thymeleaf URL表达式的变量占位功能，这种方式更符合框架规范，可读性更强：

<img th:src="@{~/puzzles/{dirName}/{puzzleName}.png(dirName=${category.dirName}, puzzleName=${category.randomPuzzleName})}" />

• @{~/...} 表示服务器相对URL，会自动忽略应用上下文路径（比如你的/www），直接生成根路径开头的URL。
• {dirName} 和 {puzzleName} 是URL中的占位符，后面括号里的dirName=${category.dirName}用于绑定变量值，Thymeleaf会自动完成拼接。

方法2：直接拼接字符串表达式 #

如果更习惯字符串拼接的方式，可以直接用Thymeleaf的变量表达式生成完整路径：

<img th:src="${'/puzzles/' + category.dirName + '/' + category.randomPuzzleName + '.png'}" />

这种方式直接生成绝对路径字符串，绕过Thymeleaf的URL解析器，同样能得到你需要的/puzzles/xxx/xxx.png格式。

验证效果 #

两种方法最终都会生成你期望的HTML代码：

<img src="/puzzles/3DMathPuzzles-Cube-555/3DMathPuzzle-Cube-555-00011-5.png" />

内容的提问来源于stack exchange，提问作者Neil