springBoot+thymeleaf，引入的图片不显示，显示404

问题遇到的现象和发生背景

使用springBoo引入thymeleaf模板时，图片不显示，提示404找不到

问题相关代码，请勿粘贴截图

img


这个是页面的代码，引入的css和js文件没有问题。就图片不行

img


这个事项目的结构

试了网上很多的办法都不行，

加上static文件夹

@/{static/images/y.jpg}
  1. 检查打包后是否打包静态资源文件
  2. 检查是否排除静态资源的权限通知
  3. 检查路径是否对应静态资源的路径

springboot和thymeleaf利用mvc原生方式实现过轮播图。你可以试试来自图床的图片呢,即使用图片链接。

我采用Springboot web(mvc)+thymeleaf,前端样式框架采用bootstrap 4.0。

考虑到轮播图中的内容会变,比如当我们上线新的文章之后,可以在后台将新的文章加入到首页轮播图中,这个时候我们又不希望修改页面,所以将轮播图中变化的部分提取出来存入数据库,从后端动态获取。

这里贴一下代码实现吧:

<!--轮播图-->
  <div class="row" role="main"> 
   <div class="col-md-12"> 
    <div id="demo" class="carousel slide post-wrapper" data-ride="carousel"> 
     <!-- 指示符 --> 
     <ul class="carousel-indicators"> 
      <li data-target="#demo" data-slide-to="0" class=""></li> 
      <li data-target="#demo" data-slide-to="1" class="active"></li> 
      <li data-target="#demo" data-slide-to="2"></li> 
     </ul> 
     <div class="carousel-inner"> 
      <!--轮播图动态内容模板--> 
      <th:block th:each="carousel:${carousels}"> 
       <div th:class="${carousel.CarouselItemCls}"> 
        <a th:href="${carousel.Link}"><img th:src="${carousel.Cover}" /></a> 
        <div class="carousel-caption"> 
         <h3 th:text="${carousel.Name}"></h3> 
         <p th:text="${carousel.Description}"></p> 
        </div> 
       </div> 
      </th:block> ` 
     </div> 
     <!-- 左右切换按钮 --> 
     <a class="carousel-control-prev" href="#demo" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> 
     <a class="carousel-control-next" href="#demo" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> 
    </div> 
   </div> 
  </div>

到这里,我们的核心功能完成了。

完整实现在我之前的文章https://www.52interview.com/book/36/370中有比较详细讲解.可以参考一下,希望能够帮助到您。

只有图片404加载不出来吗？css和js引入正常吗？如果css和js正常，图片不正常，那么建议你图片引入使用原生的，不要加th了，例如

<img src="../static/images/y.jpg">