Spring Boot Thymeleaf列表页面图片无法显示问题求助

我来帮你搞定这个图片显示的问题～你现在遇到的核心问题是Thymeleaf的URL表达式写法不正确，导致图片路径没有正确拼接文件名，所以只显示了文件名但加载不出图片。

先看你原来的img标签代码：

<img src="../static/img/ "width="100" th:src="@{img/' + files + '}"/>

这里的@{img/' + files + '}是错误的写法，Thymeleaf不支持这种JavaScript式的字符串拼接，所以生成的路径是无效的。

修正后的代码方案 #

推荐两种正确的写法，选其中一种就行：

方案一：使用URL变量占位符（更规范）

<table border='1' width='50%' height='100%'>
    <tr th:each="files: ${fileName}">
        <td th:text="${files}"/>
        <td><img width="100" th:src="@{img/{filename}(filename=${files})}" th:alt="${files}"/></td>
    </tr>
</table>

这种方式利用Thymeleaf的URL变量语法，{filename}是占位符，后面的(filename=${files})用来传递变量值，能自动生成正确的上下文相对路径。

方案二：使用字符串拼接语法

<table border='1' width='50%' height='100%'>
    <tr th:each="files: ${fileName}">
        <td th:text="${files}"/>
        <td><img width="100" th:src="|@{img/}${files}|" th:alt="${files}"/></td>
    </tr>
</table>

这里用|...|包裹的是Thymeleaf的字符串拼接表达式，把上下文相对路径@{img/}和文件名变量${files}拼接在一起，写法更直观。

额外注意事项 #

• 确认你的图片确实保存在src/main/resources/static/img/目录下，文件名和${files}的取值完全一致（注意大小写，Linux/macOS系统对文件名大小写敏感）
• 可以打开浏览器开发者工具（F12），查看图片元素的实际请求路径，看看是不是路径拼接错误（比如多了斜杠、少了斜杠，或者文件名不对）
• 上传功能要确保图片确实被保存到了static/img目录，如果是动态上传到外部目录，需要额外配置Spring Boot的静态资源映射（不过你说上传功能正常，大概率是路径写法问题）

这样修改后，网页应该就能同时显示文件名和对应的图片啦～

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