Thymeleaf为动态拼接的元素src链接写法

原创已于 2022-04-08 11:26:22 修改 · 1.4w 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#thymeleaf

于 2019-05-06 19:01:06 首次发布

thymeleaf 专栏收录该内容

1 篇文章

订阅专栏

近期使用Thymeleaf引擎时遇到不少问题，作者记录下来避免后续麻烦。正常为页面添加背景用th:url=\@{…}\，若将CSS样式放到.css中，只需url(…)，且引用路径相同，还提及了src相关内容。

Thymeleaf为动态拼接的元素src链接写法

近期使用thymeleaf引擎，发现实际情况的许多坑，记录避免以后遇到类似麻烦

首先说下 URL：
正常情况下为页面添加背景使用 th:url="@{…}"即可，但是将这些CSS样式提出来放到 .css 中时只需url(…)，其中引用的路径相同；

例如： .header_bg{height:945px; background:#151515 url(/image/login/bg.jpg);}

src：

使用ajax动态添加节点的src链接，无需th:src="@{...}"直接src="..."即可（链接地址...相同）。

参考：
success:function(datas){
	datas = eval(datas);
	var sonFiles="";
	for(var s=0; s < datas.length;s++){
		if(datas[s].isFile == 1){
			sonFiles+='<p><img id="'+datas[s].name+'" src="/image/XT/folder.jpg" class="img_1" width="129" height="91">'+datas[s].name+'<br /></p>';
		}else{
			sonFiles+='<p><img id="'+datas[s].name+'" src="/image/XT/file.png" class="img_2" width="129" height="91">'+datas[s].name+'<br /></p>';
		}
	}
	//$(".img_1").attr("src","/image/XT/folder.jpg");
	//$(".img_2").attr("src","/image/XT/file.png");
	//$("#js").attr("src","/image/XT/file.png");
	$("#sonFiles").html(sonFiles);
}

说明下：刚开始我是th:src拼接的，发现不行，查看页面代码，发现新元素就是单纯的拼接样式。参照网上其他人的经验，在去掉链接在下面为新的元素添加属性渲染还是不行，又把拼接的src地址改成相对地址依然不行，把新元素的CSS样式提前放到 .css 文件中也不行。
	按理说在下方为新添加的元素增加样式是可以的，以后再验证下。