原生顯示遠程連結#
原生顯示本地圖片#
自定義本地圖片#
修改圖片為 html 寫法，設置style="width: 320px;"
<img src="/spinner.gif" data-src="/images/pexels-photo-20523844.jpeg" style="width:320px;">
一行兩列#
<div class="image-cols-2">
<img src="/images/pexels-photo-8536415.jpeg">
<img src="/spinner.gif" data-src="/images/pexels-kyle-miller-20582700.jpg">
</div>
為了實現懶加載：我們需要在src中輸入/spinner.gif, 在data-src中輸入圖片真實地址。如果不想要使用這個功能，直接在src中輸入圖片真實地址即可。
但是圖片介面的寫法是替換為了html的寫法了，還加上了一點樣式。
一行三列#
<div class="image-cols-3">
<img src="/spinner.gif" data-src="/images/pexels-photo-8536415.jpeg">
<img src="/spinner.gif" data-src="/images/pexels-kyle-miller-20582700.jpg">
<img src="/spinner.gif" data-src="/images/pexels-photo-20523844.jpeg">
</div>
一行四列#
<div class="image-cols-4">
<img src="/spinner.gif" data-src="/images/pexels-photo-8536415.jpeg">
<img src="/spinner.gif" data-src="/images/pexels-kyle-miller-20582700.jpg">
<img src="/spinner.gif" data-src="/images/pexels-photo-20523844.jpeg">
<img src="/spinner.gif" data-src="/images/pexels-photo-8536415.jpeg">
</div>
其實都可以#
其實想怎麼展示都可以，只是需要懂一點 TailwindCss.
<div class="image-cols-2">
<img src="/spinner.gif" data-src="/images/pexels-photo-8536415.jpeg">
<img class="row-span-2" src="/spinner.gif" data-src="/images/pexels-jeffer-berrire-9027257.jpg">
<img src="/spinner.gif" data-src="/images/pexels-kyle-miller-20582700.jpg">
</div>
記住#
主題提供了三個簡單的樣式類，您可以直接使用它。
- 一行兩列：
class="image-cols-2" - 一行三列：
class="image-cols-3" - 一行四列：
class="image-cols-4"
如果你想實現更複雜的顯示，就去了解一下 TailwindCss 吧。