Pictures display - AR Blogz

Display remote links

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

Display remote links

1
![](https://astro-yi.obs.cn-east-3.myhuaweicloud.com/avatar.png)

Show Local Pictures

1
![](/avatar.png)

Customize Local Images

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

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

One row, two columns.

1
<div class="image-cols-2">
2
  <img src="https://astro-yi.obs.cn-east-3.myhuaweicloud.com/pexels-photo-8536415.jpeg">
3
  <img src="/images/spinner.gif" data-src="https://astro-yi.obs.cn-east-3.myhuaweicloud.com/pexels-kyle-miller-20582700.jpg">
4
</div>

For lazy loading: we need to enter /images/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 src="/images/spinner.gif" data-src="https://astro-yi.obs.cn-east-3.myhuaweicloud.com/pexels-photo-8536415.jpeg">
3
  <img src="/images/spinner.gif" data-src="https://astro-yi.obs.cn-east-3.myhuaweicloud.com/pexels-kyle-miller-20582700.jpg">
4
  <img src="/images/spinner.gif" data-src="https://astro-yi.obs.cn-east-3.myhuaweicloud.com/pexels-photo-20523844.jpeg">
5
</div>

One row, four columns

1
<div class="image-cols-4">
2
  <img src="/images/spinner.gif" data-src="https://astro-yi.obs.cn-east-3.myhuaweicloud.com/pexels-photo-8536415.jpeg">
3
  <img src="/images/spinner.gif" data-src="https://astro-yi.obs.cn-east-3.myhuaweicloud.com/pexels-kyle-miller-20582700.jpg">
4
  <img src="/images/spinner.gif" data-src="https://astro-yi.obs.cn-east-3.myhuaweicloud.com/pexels-photo-20523844.jpeg">
5
  <img src="/images/spinner.gif" data-src="https://astro-yi.obs.cn-east-3.myhuaweicloud.com/pexels-photo-8536415.jpeg">
6
</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 src="/images/spinner.gif" data-src="https://astro-yi.obs.cn-east-3.myhuaweicloud.com/pexels-photo-8536415.jpeg">
3
  <img class="row-span-2" src="/images/spinner.gif" data-src="https://astro-yi.obs.cn-east-3.myhuaweicloud.com/pexels-jeffer-berrire-9027257.jpg">
4
  <img src="/images/spinner.gif" data-src="https://astro-yi.obs.cn-east-3.myhuaweicloud.com/pexels-kyle-miller-20582700.jpg">
5
</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.