springBoot使用：thymeleaf 三目运算的问题

Posted 2020-10-30 夏侯胖墩

需求描述：图片元素背景图片加载：若后台传来的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)}  这个工具方法是可以给变量加字符串前缀的。

所以，我就用 三目预算替换掉第一个参数，终于能行了。

貌似我这么奇葩的写法 还没看到过，可能是解决这问题的思路不对吧。