得到随机图片

title: 得到随机图片 id: 92ba1a88a211ae97a80df2609d9da026 tags: [] date: 2000/01/01 00:00:00 updated: 2023/03/04 19:29:12 isPublic: true --#|[分隔]|#--

得到随机图片

开发过程，或者其他一些测试阶段，经常需要得到一张或多张不同的图片，来作为 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

其他接口

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