springBoot使用:thymeleaf 三目运算的问题
需求描述:图片元素背景图片加载:若后台传来的url为空,则显示默认图片url。
我是这么干的:
1 <div class="swiper-container"> 2 <div class="swiper-wrapper"> 3 <div class="swiper-slide" th:unless="${#lists.isEmpty(hotList)}"
th:each="element : ${hotList}"
th:style="${#strings.prepend((element.imgUrl != null)?(accessPath+element.imgUrl):(accessPath+ 'img_default_2.png'),'background-image:url(')} +')'">
</div> 5 </div> 6 <!-- Add Arrows --> 7 <div class="swiper-pagination"></div> 8 </div>
遇到的坑:
因为要判断加载默认图片还是传过来的图片, 所以用三目运算。
在三目运算前加字符串'background-image:url(‘
<div class="swiper-slide" th:unless="${#lists.isEmpty(hotList)}" th:each="element : ${hotList}" th:style=" 'background-image:url(' + (${element.imgUrl} != null)?(${accessPath+element.imgUrl}):(${accessPath} + 'img_default_2.png') +''"></div>
发现 完全没效果: 整个background-image 属性都没有了。
后来测试发现 在 三目运算前面加 字符串,解析后的内容是会把字符串给弄没掉,晕死,啥原因还没空去研究。
后来 查文档,${#strings.prepend(str,prefix)} 这个工具方法是可以给变量加字符串前缀的。
所以,我就用 三目预算替换掉第一个参数,终于能行了。
貌似我这么奇葩的写法 还没看到过,可能是解决这问题的思路不对吧。