【问题标题】:Can't load image with spring boot thymeleaf无法使用 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 未找到错误:

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

【问题讨论】:

    标签: spring spring-mvc spring-boot thymeleaf


    【解决方案1】:

    试试改成

    <img src="../static/images/pirate.jpg" width="1000" 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" width="1000"
                 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】:

          呸!终于找到问题了。

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

          就这样吧:

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

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

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

          <img width="40px" th:src="@{images/danceperf.jpg}" /> 
          
          1. 您不需要输入任何其他文件夹名称,因为除了图像的父文件夹。 (记住:您需要将一个子文件夹添加到将用作图像的父文件夹的资源中。

          2. 在此之后,最后(这很重要!)=> 构建您的项目,然后启动您的 Spring Boot 应用程序。图片应该可以正常加载。

          希望这个答案有帮助!

          【讨论】:

            【解决方案7】:

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

            【讨论】:

            • 您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息,例如引用或文档,以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center
            猜你喜欢
            • 2021-04-24
            • 2017-07-13
            • 1970-01-01
            • 1970-01-01
            • 2021-11-10
            • 1970-01-01
            • 2020-11-28
            • 2018-08-31
            • 2019-09-27
            相关资源
            最近更新 更多