需求描述:圖片元素背景圖片加載:若后台傳來的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)} 這個工具方法是可以給變量加字符串前綴的。
所以,我就用 三目預算替換掉第一個參數,終於能行了。
貌似我這么奇葩的寫法 還沒看到過,可能是解決這問題的思路不對吧。