编程崽

登录

一叶在编程苦海沉沦的扁舟之上,我是那只激情自射的崽

得到随机图片

得到随机图片

开发过程,或者其他一些测试阶段,经常需要得到一张或多张不同的图片,来作为 mock 数据调试,下面这个免费网站就是提供了这样一个服务。

picsum.photos 官网:https://picsum.photos/

此网站所有的图片地址:https://picsum.photos/images

注意一: 以下不同的效果,可以叠加使用,比如可以同时使用灰度和模糊。

注意二: 虽然单独访问某个地址,都能获取到随机一张图片,由于前端浏览器的 get 请求缓存逻辑,页面中多次请求同一个 url,展示的都将是同一张图片,所以需要给每个图片地址后面,添加一个随机字符串,来使每个 url 互不相同,防止浏览器的缓存。


获得随机图像

只需在官网 URL 后添加所需的图像尺寸(宽度和高度),即可获得随机图像。

长方形图片

sh 复制代码
https://picsum.photos/{宽}/{高}

查看效果:https://picsum.photos/200/300

正方形图片可以简写

sh 复制代码
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 的位置,即可:

sh 复制代码
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

其他接口

除了以上用法,还提供了获取图片信息、所有图片列表的接口,不常用,可去官网查看。