首页 新闻 搜索 专区 学院

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

0
悬赏园豆:20 [已解决问题] 解决于 2022-05-17 20:47

最近想实现一个轮播页作为信息的展示,轮播组件使用的是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("遍历结束");
    });
});


up-bear的主页 up-bear | 初学一级 | 园豆:144
提问于:2022-01-06 18:05
< >
分享
最佳答案
0

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 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>

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

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

收获园豆:20
智客工坊 | 小虾三级 |园豆:1265 | 2022-01-09 15:56
其他回答(1)
0

这个问题假期鸽了很久,哈哈。首先感谢热心盆友的帮助。但由于不想改动太多(太懒),所以个人选择使用图床解决这个问题,图片路径使用图床中图片的图像链接。

up-bear | 园豆:144 (初学一级) | 2022-01-23 17:26
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册