Astro-Yi 图片功能预览

原生显示远程链接

Copy
![](https://cirry.cn/avatar.png)

原生显示本地图片

Copy
![](/images/pexels-photo-20523844.jpeg)

自定义本地图片

修改图片为 html 写法，设置style="width: 320px;"

Copy


一行两列

Copy






为了实现懒加载：我们需要在src中输入/spinner.gif, 在data-src中输入图片真实地址。如果不想要使用这个功能，直接在src中输入图片真实地址即可。
但是图片接口的写法是替换为了html的写法了，还加上了一点样式。

一行三列

Copy







一行四列

Copy








其实都可以

其实想怎么展示都可以，只是需要懂一点 TailwindCss.

Copy






记住

主题提供了三个简单的样式类，您可以直接使用它。

一行两列： class="image-cols-2"

一行三列： class="image-cols-3"

一行四列： class="image-cols-4"

如果你想实现更复杂的显示，就去了解一下 TailwindCss 吧。