无法使用 Spring Boot thymeleaf 加载图像

Question

我对 Spring Boot 非常陌生，正在关注 Guru Spring 框架 教程。

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

我还将相同的图像复制到模板目录并使用了这两个文件，但都无法加载。

这是我的 html 文件：

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

404 未找到错误：

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

Answer 1

尝试更改为

<img src="../static/images/pirate.jpg" width="1000" th:src="@{images/pirate.jpg}"/>

Answer 2

在img标签中，属性th:src的值指向错误的路径，它应该是

th:src="@{images/pirates.jpg}"

而不是

th:src="@{../static/images/pirates.jpg}"

<img src="../static/images/pirates.jpg" width="1000"
             th:src="@{images/pirates.jpg}"/>

通过查看源代码来检查浏览器中渲染的 HTML 中的最终路径

Answer 3

唷！终于找到问题了

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

所以就这样：

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

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

正确的 thymleaf 文件命令如下：

<img width="40px" th:src="@{images/danceperf.jpg}" /> 

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

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

希望这个答案有帮助！

Answer 4

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

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

Answer 5

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

示例

Answer 6

使用以下代码后我解决了我的错误，您需要使用

src="@{/images/pirates.jpg}"

。而不是这个

src="@{images/pirates.jpg}"

Answer 7

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