最近想实现一个轮播页作为信息的展示，轮播组件使用的是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 id="myCarousel" class="carousel slide">
    <!-- 轮播（Carousel）指标 -->
    <ol class="carousel-indicators" id="carousel-circleGroup">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <!-- 轮播（Carousel）项目 -->
    <div class="carousel-inner" id="carousel-bodyGroup">
        <div class="item active">
            <div class="my_img" style="background-image: url(../../static/img/web/1.png);" th:style="'background-image: url(/img/web/1.png);'"></div>
            <div class="carousel-caption">标题 1</div>
        </div>
        <div class="item">
            <div class="my_img" style="background-image: url(../../static/img/web/2.png);" th:style="'background-image: url(/img/web/2.png);'"></div>
            <div class="carousel-caption">标题 2</div>
        </div>
        <div class="item">
            <div class="my_img" style="background-image: url(../../static/img/web/3.png);" th:style="'background-image: url(/img/web/3.png);'"></div>
            <div class="carousel-caption">标题 3</div>
        </div>
    </div>

    <!-- 轮播（Carousel）导航 -->

    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">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("遍历结束");
    });
});