用 EdgeOne Pages 搭建随机图床

缘起#

在开发网站时，我们经常需要一个“随机图片”接口来作为背景图或封面。虽然市面上有很多现成的 API，但往往存在收费高、无法区分设备类型、随时跑路、或者无法自定义图片库等问题。

于是，你决定自建。买个服务器？这可太奢侈了。不如直接用免费的 EdgeOne Pages ！

为此，我开发了这个项目：EdgeOne-Random-Picture

你可以点击访问我的已部署版本查看效果：https://picture.thwthw.dpdns.org/

核心特性#

🚀 极速响应：基于 EdgeOne 全球边缘节点实现图片分发，毫秒级加载。
📱 智能分发：自动识别访问者设备类型（PC/移动端），精准推送适配比例的图片。
🖼️ 沉浸式图库：内置瀑布流图库，支持 Lightbox 预览，查看图片的分辨率、文件大小以及适配类型（横屏/竖屏）信息。
🛠️ 零配置维护：只需将图片丢进文件夹，构建时自动生成元数据，无需数据库。

技术实现#

自动化资源发现与元数据生成#

在传统的逻辑里，如果想要添加一张新图片，往往需要手动修改代码或数据库：

1
const images = ['/img/1.jpg', '/img/2.jpg', ...]; // 噩梦的开始

这种方式的人工成本极高。

为此，我编写了一个构建预处理脚本。在项目打包之前，它会利用 Node.js 的文件系统能力，递归扫描 public/images 目录。

该脚本不仅能自动发现资源，还会引入 image-size 库读取每张图片的 Width 和 Height，并根据宽高比进行逻辑分类：

横屏图片（宽 > 高）：归类为 pc 素材。
竖屏图片（高 >= 宽）：归类为 mobile 素材。

1
// scripts/generate-images-metadata.js 核心逻辑
2
const dimensions = imageSize(buffer);
3
const isPC = dimensions.width > dimensions.height;
4
pc.push({ src: relativePath, width: dimensions.width, height: dimensions.height, size: size });

流程图如下：

Loading Mermaid...

智能边缘分发#

当用户访问 API 时，Next.js 的 Route Handlers 会在 EdgeOne 的边缘节点上运行。

它不需要读硬盘，不需要查数据库，只需要执行极简的逻辑：

读取元数据：直接导入构建时生成的 JSON。
识别设备：检查请求头中的 User-Agent。
随机分发：根据设备类型从对应的数组中随机抽取一张。

Loading Mermaid...

总结#

通过这套方案，我们实现了一个 既要又要 的完美平衡：

维护极简：只管往文件夹里丢图片，Git 提交即部署。
体验极佳：手机看竖图，电脑看横图，自动适配。
成本极低：完全运行在 EdgeOne Pages 的免费额度内。
性能优异：边缘计算 + 全球 CDN 加速，响应速度快。

结尾#

H2O-ME

EdgeOne-Random-Picture

Waiting for api.github.com...

00K

Waiting...

目前该项目已经完全开源，欢迎 Fork 尝试。如果你觉得这个项目对你有帮助，欢迎在 GitHub 上点个 Star ⭐️。