一个随机生成图片的网站: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 网站上查看。但是我觉得,做一般静态页面的话,以上方法够用了。