一个随机生成图片的网站：Lorem Picsum。

有时候，我们做静态页面需要大量图片去填充内容，以使用该网站去生成指定尺寸的图片。每次打开页面都会获取不同的图片，就不用我们做静态页面开发的时候，绞尽脑汁去找图片了。

一、基本使用方法

如：获取宽200，高300的图片。

 https://picsum.photos/200/300​<img src="https://picsum.photos/200/300">

获取宽200的正方形图片。

 https://picsum.photos/200​<img src="https://picsum.photos/200">

二、防止图片缓存

不过，如果要使用多张图片。会发现，生成的图片都一样。这是因为浏览器会缓存图片。一张图片下载后，再加载相同路径的图片，浏览器会从缓存里获取图片。

因此，为了防止浏览器从缓存读取图片，可以在图片路径后面增加random参数。

 <img src="https://picsum.photos/200/300?random=1"><img src="https://picsum.photos/200/300?random=2">

三、VScode里生成图片列表

在 VScode 里要快速生成随机图片列表，可以使用 emmet 编码：

 ul.picList>li*6>a[href=#]>img[src=https://picsum.photos/200/300?random\=$] ​<ul class="picList"><li><a href="#"><img src="https://picsum.photos/200/300?random=1" alt=""></a></li><li><a href="#"><img src="https://picsum.photos/200/300?random=2" alt=""></a></li><li><a href="#"><img src="https://picsum.photos/200/300?random=3" alt=""></a></li><li><a href="#"><img src="https://picsum.photos/200/300?random=4" alt=""></a></li><li><a href="#"><img src="https://picsum.photos/200/300?random=5" alt=""></a></li><li><a href="#"><img src="https://picsum.photos/200/300?random=6" alt=""></a></li></ul>

注：URL 里参数 = 必须有一个转义符 \。因为，属性 src 已经有一个 = 了。

更多的用法大家可以去 ​​​​​​​Lorem Picsum 网站上查看。但是我觉得，做一般静态页面的话，以上方法够用了。