Joke Heaven

Display remote links

1
![](https://share.cirry.cn/images/astro-yi/avatar.png)

Show Local Pictures

1
![](/avatar.png)

Customize Local Images

Use html, setstyle="width: 200px;"

1
<img src="/spinner.gif" data-src="/avatar.png" style="width:200px;" />

One row, two columns.

1
<div class="image-cols-2">
2
  <img src="https://share.cirry.cn/images/astro-yi/pexels-photo-8536415.jpeg" />
3
  <img
4
    src="/spinner.gif"
5
    data-src="https://share.cirry.cn/images/astro-yi/pexels-kyle-miller-20582700.jpg"
6
  />
7
</div>

For lazy loading: we need to enter /spinner.gif in src, and the real address of the image in data-stc. If you don’t want to use this feature, just enter the image’s real address in src.

One row, three columns

1
<div class="image-cols-3">
2
  <img
3
    src="/spinner.gif"
4
    data-src="https://share.cirry.cn/images/astro-yi/pexels-photo-8536415.jpeg"
5
  />
6
  <img
7
    src="/spinner.gif"
8
    data-src="https://share.cirry.cn/images/astro-yi/pexels-kyle-miller-20582700.jpg"
9
  />
10
  <img
11
    src="/spinner.gif"
12
    data-src="https://share.cirry.cn/images/astro-yi/pexels-photo-20523844.jpeg"
13
  />
14
</div>

One row, four columns

1
<div class="image-cols-4">
2
  <img
3
    src="/spinner.gif"
4
    data-src="https://share.cirry.cn/images/astro-yi/pexels-photo-8536415.jpeg"
5
  />
6
  <img
7
    src="/spinner.gif"
8
    data-src="https://share.cirry.cn/images/astro-yi/pexels-kyle-miller-20582700.jpg"
9
  />
10
  <img
11
    src="/spinner.gif"
12
    data-src="https://share.cirry.cn/images/astro-yi/pexels-photo-20523844.jpeg"
13
  />
14
  <img
15
    src="/spinner.gif"
3 collapsed lines
16
    data-src="https://share.cirry.cn/images/astro-yi/pexels-photo-8536415.jpeg"
17
  />
18
</div>

Actually, it’s all right.

You can actually display it however you want, you just need to know a little bit about TailwindCss.

1
<div class="image-cols-2">
2
  <img
3
    src="/spinner.gif"
4
    data-src="https://share.cirry.cn/images/astro-yi/pexels-photo-8536415.jpeg"
5
  />
6
  <img
7
    class="row-span-2"
8
    src="/spinner.gif"
9
    data-src="https://share.cirry.cn/images/astro-yi/pexels-jeffer-berrire-9027257.jpg"
10
  />
11
  <img
12
    src="/spinner.gif"
13
    data-src="https://share.cirry.cn/images/astro-yi/pexels-kyle-miller-20582700.jpg"
14
  />
15
</div>

Remember

The theme provides three simple style classes that you can use directly.

One row and two columns: class="image-cols-2".
one row and three columns: class="image-cols-3".
one row and four columns: class="image-cols-4".

If you want a more complex display, check out TailwindCss.

Pictures display