无法使用 Spring Boot thymeleaf 加载图像

Posted 2023-02-26

【中文标题】无法使用 Spring Boot thymeleaf 加载图像

【英文标题】：Can't load image with spring boot thymeleaf

【发布时间】：2018-12-07 13:36:59

【问题描述】：

我是 Spring Boot 的新手，并遵循 Guru spring framework 教程。

我的简单 Spring Boot 应用程序运行成功，并且我的控制器工作正常。 我已经使用 thymeleaf 来显示 html 页面并使用了一些 bootstrap css。一切正常，但我的一个 html 页面中有一个图像标签。 当我运行应用程序时，Thymeleaf 显示正确的页面，但没有显示图像。我用谷歌搜索了这个并将我的图像放在 /resources/static/images 下。这是我的项目结构：

我也将同一张图片复制到模板目录并使用了这两个文件，但都无法加载。

这是我的 html 文件：

这就是我运行应用程序时得到的结果：

404 未找到错误：

谁能告诉我我错过了什么？

【参考方案1】：

试试改成

<img src="../static/images/pirate.jpg"  th:src="@images/pirate.jpg"/>

【讨论】：

很棒的兄弟，谢谢

【参考方案2】：

在img标签中属性th:src的值指向了错误的路径，应该是th:src="@images/pirates.jpg"而不是th:src="@../static/images/pirates.jpg"

<img src="../static/images/pirates.jpg" 
             th:src="@images/pirates.jpg"/>

通过查看源代码在浏览器中检查呈现的 HTML 中的最终路径

【参考方案3】：

我遇到了同样的问题，当我删除前导斜杠时它可以工作

<img th:src="@images/TacoCloud.png" />

【参考方案4】：

所有资源都存储在静态文件夹中，这是默认目录。您无需指定要使用的图像的相对路径。只需简单地输入文件名。

示例

【参考方案5】：

使用以下代码后，我解决了我的错误，您需要使用src="@/images/pirates.jpg"。而不是这个src="@images/pirates.jpg"

【讨论】：

感谢上面，当文件位于resources/images/pirates.jpg时，我成功使用了src="@/images/pirates.jpg"

【参考方案6】：

呸！终于找到问题了。

花了一整天的时间后，我终于在这个问题上发现了一些富有成果的东西。

就这样吧：

请将您的图片放在此目录下 => 资源/静态/图像/

现在您已经放置了图像，是时候从 HTML 文件中的标记中获取图像了。我个人使用的是 Spring Boot 的名为 thymleaf 的产品，所以这个答案仅与此有关。

获取图片正确的thymleaf文件命令如下：

<img  th:src="@images/danceperf.jpg" /> 

您不需要输入任何其他文件夹名称，因为除了图像的父文件夹。 （记住：您需要将一个子文件夹添加到将用作图像的父文件夹的资源中。）

在此之后，最后（这很重要！）=> 构建您的项目，然后启动您的 Spring Boot 应用程序。图片应该可以正常加载。

希望这个答案有帮助！

【参考方案7】：

使用-img th:src="@/images/TacoCloud.png" , 是的，这个是完全正确的。 添加所有 WEB spring boot 启动器，如果可以的话，也尝试使用 @RequestMapping 而不是 @GetMapping。

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。