这玩意儿是啥？
简单说，LorinPixel就是个“图片自动生成器”。你给它一个尺寸（比如宽400像素，高300像素），它就给你一张这个尺寸的随机图片。
就像你去照相馆说“给我一张400×300的照片”，摄影师随机从相册里抽一张给你——每次还不一样！
这有啥用啊？
想象一下你在做网页：
- 页面布局需要图片占位置
- 但真实图片还没准备好
- 你又想看看图片放上去效果咋样
这时候LorinPixel就派上用场了！它帮你生成临时图片，让你能继续干活，不用等真实图片。
咋用呢？
特别简单，就一个网址模板：
https://picsum.photos/宽度/高度
比如：
https://picsum.photos/400/300→ 400×300的图片https://picsum.photos/800/600→ 800×600的图片
你在浏览器打开这个链接，就能看到图片了。刷新页面，图片就换一张。
实际咋用在网页里？
<!-- 简单用法 -->
<img src="https://picsum.photos/200/150" alt="占位图片">
<!-- 避免缓存（让每次图片都不一样） -->
<img src="https://picsum.photos/200/150?random=1" alt="图片1">
<img src="https://picsum.photos/200/150?random=2" alt="图片2">
<img src="https://picsum.photos/200/150?random=3" alt="图片3">
小技巧
-
避免图片重复：在网址后面加
?random=数字，比如?random=123，这样每次都是新图片 -
黑白图片：加
?grayscale，比如https://picsum.photos/400/300?grayscale -
模糊效果：加
?blur，适合做背景图
举个实际例子
假如你要做商品展示页，商品图还没到位：
<div class="product-grid">
<div class="product">
<img src="https://picsum.photos/300/200?random=1" alt="商品1">
<h3>商品名称1</h3>
</div>
<div class="product">
<img src="https://picsum.photos/300/200?random=2" alt="商品2">
<h3>商品名称2</h3>
</div>
<div class="product">
<img src="https://picsum.photos/300/200?random=3" alt="商品3">
<h3>商品名称3</h3>
</div>
</div>
这样你就能先看到页面布局效果，等真实图片来了再替换就行。
总结
LorinPixel就是个“临时图片供应商”，让你在开发阶段不用为找图片发愁。简单、免费、随用随取，前端开发必备小工具！
记住核心用法：https://picsum.photos/宽/高，剩下的就是灵活运用了。
有缓存每张图都一样
.list>img*30[src=https://picsum.photos/200/300]
每张图片都不一样
.list>img*30[src=https://picsum.photos/200/300?$]
