1. 网页里放一张随机图#

1
<img src="https://img.tsh520.cn/random?type=img&dir=blog/随机封面图" alt="随机图">

2. 当 CSS 背景图#

1
.hero {
2
  background-image: url('https://img.tsh520.cn/random?type=img&dir=blog/随机封面图&orientation=landscape');
3
  background-size: cover;
4
}

3. 只要横图（做文章封面）#

1
https://img.tsh520.cn/random?type=img&dir=blog/随机封面图&orientation=landscape

4. 脚本里拿链接#

1
https://img.tsh520.cn/random?type=url&form=text&dir=blog/随机封面图

返回一行纯文本，比如：

1
https://img.tsh520.cn/file/blog/随机封面图/16.webp

用 curl 命令测试最方便：

1
curl "https://img.tsh520.cn/random?type=url&form=text&dir=blog/随机封面图"

坑一：不带 dir 报 Directory not allowed#

图床开了目录白名单之后，每次请求必须显式带上 dir，且目录必须在后台配置的允许范围里。别指望”不传就默认整个图床随机”——会直接报错。

坑二：上传的图片”随机不到”#

实测发现：如果上传文件时没带正确的文件类型（比如写脚本上传时 Blob 没设置 MIME 类型），图床会把文件记录成 application/octet-stream。文件本身没问题、直链也能访问，但随机图 API 按”图片”筛选时直接跳过它，表现就是：文件夹里明明有几十张图，随机接口却返回空。

排查方法：管理后台看该文件的类型是不是显示成 application/octet-stream。修复方法：删除后重新上传，上传时确保带正确类型（webp/png/jpg 等）。

坑三：多个地方用同一个 URL，显示的会是同一张图#

随机接口本身每次都会随机，但浏览器会缓存：如果页面上十几个位置都写同一个 /random?... 地址，浏览器只会请求一次，然后全部位置显示同一张图。

解法：给每个使用位置加一个不同的参数，让 URL 不一样即可（图床不认识这个参数也没关系，它只是让浏览器认为”这是不同的网址”）：

1
https://img.tsh520.cn/random?type=img&dir=blog/随机封面图&v=文章ID

v 换成每篇文章独有的编号（文章 ID、slug、序号都行），这样每篇文章各请求一次、各拿到一张，同篇文章刷新后也不会变（URL 固定）。

补充提醒：加载速度#

随机接口每次请求都要实时查数据库，比访问一张固定图片慢一些。不适合放首屏关键位置（比如首页 Hero、导航 Logo），适合做背景、封面这种”锦上添花”的场景。追求极致速度的话，还是用固定图片直链走 CDN 缓存。