登录
开发过程,或者其他一些测试阶段,经常需要得到一张或多张不同的图片,来作为 mock 数据调试,下面这个免费网站就是提供了这样一个服务。
picsum.photos 官网:https://picsum.photos/
此网站所有的图片地址:https://picsum.photos/images
注意一: 以下不同的效果,可以叠加使用,比如可以同时使用灰度和模糊。
注意二: 虽然单独访问某个地址,都能获取到随机一张图片,由于前端浏览器的 get 请求缓存逻辑,页面中多次请求同一个 url,展示的都将是同一张图片,所以需要给每个图片地址后面,添加一个随机字符串,来使每个 url 互不相同,防止浏览器的缓存。
只需在官网 URL 后添加所需的图像尺寸(宽度和高度),即可获得随机图像。
https://picsum.photos/{宽}/{高}
查看效果:https://picsum.photos/200/300
https://picsum.photos/{边长}
查看效果:https://picsum.photos/200
访问这个获取随机图片的地址后,可以发现地址发生了 302 重定向,访问一个新的地址,这个地址就指向一张固定的图片,比如:
https://i.picsum.photos/id/530/200/300.jpg?hmac=pl2pzOmYOiMa6E_Ddf_SFQVGjDvmZ1xgj-JznVHuUsg
获取固定某张图片,需要先知道固定的这张图片的id。
可以先获取一张随机图片,得到图片后,再查看 302 重定向后的图片地址。
这个地址的格式为 https://i.picsum.photos/id/{id值}/{长宽和其他}
。
由此可以得到这张图片的 id,再把 id 置于如下的地址中 id 的位置,即可:
https://picsum.photos/id/{id值}/{宽}/{高}
查看效果:https://picsum.photos/id/900/200
可多次点开链接,会发现 302 重定向后,打开的都是同一张图片
通过在图片地址后面添加 ?grayscale,来获取灰度的图片。
查看效果:https://picsum.photos/200?grayscale
通过在图片地址后面添加 ?blur,来获取灰度的图片。
查看效果:https://picsum.photos/200?blur
您可以通过在1和之间提供一个数字来调整模糊量10。
查看效果:https://picsum.photos/200/300/?blur=2
如果需要文件结尾,则可以将其添加 .[格式] 到URL的结尾。
实测,jpg 和 webp 可以,png 却不可以。
查看效果:https://picsum.photos/200/300.jpg
除了以上用法,还提供了获取图片信息、所有图片列表的接口,不常用,可去官网查看。