js创建HTML元素，图片资源被thymeleaf拦截无法显示

最近想实现一个轮播页作为信息的展示，轮播组件使用的是bootstap3中的，轮播图和标题从数据库中取出。项目使用springboot和thymeleaf。
访问的过程，当访问轮播页时，使用ajax发送异步请求，再用回调函数来解析服务端返回的对象列表List。但是使用js创建的 background-image 属性所引用的图片资源会被拦截，图片无法显示。想过使用 th：style=“ background-image ”， 但是由于是异步的，再创建的 th 类型的标签不会被thymeleaf模板引擎解析，这个方法也就行不通了。
这个功能思考一整天也没解决，有个思路是配置thymeleaf的资源拦截设置，将图片放在被放行的目录中，可是自己不会。。。还请大神指条明路，菜鸟在此谢过！
代码如下：
java：

@RequestMapping("/showNews")
@ResponseBody
public List showNews(){
List<News> list = newsService.listAll();
return list;
}

html:

<div>
<!-- 轮播（Carousel）指标 -->
<ol>
<li></li>
<li></li>
<li></li>
</ol>
<!-- 轮播（Carousel）项目 -->
<div>
<div>
<div th:style="'background-image: url(/img/web/1.png);'"></div>
<div>标题 1</div>
</div>
<div>
<div th:style="'background-image: url(/img/web/2.png);'"></div>
<div>标题 2</div>
</div>
<div>
<div th:style="'background-image: url(/img/web/3.png);'"></div>
<div>标题 3</div>
</div>
</div>
<!-- 轮播（Carousel）导航 -->
<a href="#myCarousel" role="button">
<span aria-hidden="true"></span>
<span>Previous</span>
</a>
<a href="#myCarousel" role="button">
<span aria-hidden="true"></span>
<span>Next</span>
</a>
</div>

js:

$(function (){
$.post('/showNews', function (datas){
alert(datas.length);
let carouselOl = document.getElementById('carousel-circleGroup');
let carouselDiv = document.getElementById('carousel-bodyGroup');
let count = 0;
alert("遍历开始");
for(let data of datas){
alert(count);
let li = document.createElement('li');
$(li).attr('data-target', "#myCarousel");
$(li).attr('data-slide-to', count+3);
console.log("开始Div1");
let div1 = document.createElement('div');
div1.className = "item";
let div2 = document.createElement('div');
div2.className = "my_img";
div2.style.backgroundImage = "url(/public/newsImg/" + data.newsImg + ")";
let div3 = document.createElement('div');
div3.className = "carousel-caption";
div3.innerText = data.newsName;
carouselOl.appendChild(li);
div1.appendChild(div2);
div1.appendChild(div3);
carouselDiv.appendChild(div1);
count++;
}
alert("遍历结束");
});
});

回答

springboot和thymeleaf利用mvc原生方式也可以实现。

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

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

这里贴一下代码实现吧:

数据库设计

从上面的分析和提取,我们不难抽出我们的carousel模型

@Data
@EqualsAndHashCode(callSuper = false)
public class Carousel implements Serializable {
    private static final long serialVersionUID = 1L;

    @TableId(value = "Id", type = IdType.AUTO)
    private Integer Id;

    /**
     * 标题
     */
    @TableField("Name")
    private String Name;

    /**
     * 跳转链接
     */
    @TableField("Link")
    private String Link;

    /**
     * 封面
     */
    @TableField("Cover")
    private String Cover;

    /**
     * 描述
     */
    @TableField("Description")
    private String Description;

    @TableField("IsDeleted")
    private Boolean IsDeleted;

    @TableField("IsActive")
    private Boolean IsActive;

    /**
     * CarouselItem 样式
     * */
    @TableField("carousel_item_class")
    private  String CarouselItemCls;

    @TableField("CreateTime")
    private LocalDateTime CreateTime;

    @TableField("ModifyTime")
    private LocalDateTime ModifyTime;
}

然后前端绑定

<!--轮播图-->
  <div role="main"> 
   <div> 
    <div> 
     <!-- 指示符 --> 
     <ul> 
      <li></li> 
      <li></li> 
      <li></li> 
     </ul> 
     <div> 
      <!--轮播图动态内容模板--> 
      <th:block th:each="carousel:${carousels}"> 
       <div th:class="${carousel.CarouselItemCls}"> 
        <a th:href="https://q.cnblogs.com/q/137809/${carousel.Link}"><img th:src="https://q.cnblogs.com/q/137809/${carousel.Cover}" /></a> 
        <div> 
         <h3 th:text="${carousel.Name}"></h3> 
         <p th:text="${carousel.Description}"></p> 
        </div> 
       </div> 
      </th:block> ` 
     </div> 
     <!-- 左右切换按钮 --> 
     <a href="#demo"> <span></span> </a> 
     <a href="#demo"> <span></span> </a> 
    </div> 
   </div> 
  </div>

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

完整实现在我之前的文章《thymeleaf实现轮播图》中有比较详细讲解.可以参考一下,希望能够帮助到您。