baozaolaowu/random-img-server

随机图片&每日一图&瀑布流展示

Demo地址：

[]
[]

一个基于Flask的网页服务，提供随机图片和每日一图功能，支持本地文件夹（如NAS）中的图片自动刷新显示。

Docker地址

https://hub.docker.com/repository/docker/baozaolaowu/random-img-server/general

核心功能

• 🖼️ 两种访问方式：
  • 网页界面（http://localhost:5000）：自动刷新，带设置按钮，浏览器全屏即可当作电子相册。
  • 直接图片链接（http://localhost:5000/img/today.jpg）：被动刷新，固定地址，强制无缓存，每次访问都会显示最新图片。
• 🔄 灵活的刷新选项：
  • 使用cron表达式自定义间隔
  • 手动刷新按钮
  • 标签页激活时自动刷新
• 📱 智能显示模式：
  • 智能模式（自动适应图片方向）
  • 宽度撑满模式
  • 高度撑满模式
  • 拉伸撑满模式
• 🚀 性能优化：
  • 图片缓存
  • 带宽感知更新
  • 非活动标签页资源节省
• 🎞️ 瀑布流模式：
  • 浏览多张图片的最佳方式
  • 多列自适应布局，可自定义列数（1-10列）
  • 文件夹导航与层级浏览
  • 图片排序功能（按文件名、创建时间、修改时间、随机顺序）
  • 图片全屏查看与缩放
  • 键盘导航（方向键切换图片，滚轮缩放，Ctrl+滚轮切换图片）
  • 自定义布局设置（列间距、图片间距、圆角大小）

使用场景

• 电子相框：自动轮播显示您的照片集
• 动态壁纸：配合支持URL图片的壁纸程序使用
• 主页背景：作为个人主页或仪表盘的背景
• 子面板背景：集成到Homepage或Sub-panel等工具，实现动态背景

快速开始

1. 创建配置目录：

bash
# 创建配置、图片和缩略图目录
mkdir -p /path/to/config /path/to/photos /path/to/thumbnails

2. 拉取Docker镜像：

bash
docker pull docker.xuanyuan.run/baozaolaowu/random-img-server:latest

3. 运行容器：

bash
docker run -d \
  -p 5000:5000 \
  -v "/path/to/config:/app/config" \
  -v "/path/to/photos:/app/photos" \
  -v "/path/to/thumbnails:/app/thumbnails" \
  --name random-img-server \
  docker.xuanyuan.run/baozaolaowu/random-img-server:latest

4. 访问服务：

• 网页界面：http://localhost:5000
• 直接图片链接：http://localhost:5000/img/today.jpg
• 瀑布流模式：http://localhost:5000/waterfall（或在主页面左下角点击"切换瀑布流模式"按钮）

配置说明

目录结构

/path/to/config/         # 配置文件目录
  └── config.json       # 定时任务配置文件
/path/to/photos/         # 图片文件目录
  └── *.jpg,*.png,...  # 图片文件
/path/to/thumbnails/     # 缩略图目录

图片要求

• 支持的格式：PNG、JPG、JPEG、GIF、BMP
• 最大文件大小：50MB

Cron表达式示例

• */5 * * * * → 每5分钟
• */30 * * * * → 每30分钟
• 0 * * * * → 每小时整点
• 0 */2 * * * → 每2小时
• 0 9 * * 1-5 → 工作日上午9点

使用方法

1. 网页访问

访问http://localhost:5000可以使用完整的网页界面，包含设置和手动刷新功能。

2. 直接图片链接

基础用法（推荐）

http://localhost:5000/img/today.jpg

这个地址每次访问都会返回一张新的随机图片，适合在大多数场景下使用。

在不同场景中使用

1. 在壁纸软件中：

# 直接填写这个地址即可
http://localhost:5000/img/today.jpg

2. 在NAS面板中：

http://localhost:5000/img/today.jpg

3. 在网页中使用：

html
<!-- 基础用法 -->
<img src="http://localhost:5000/img/today.jpg">

<!-- 如果遇到缓存问题，可以使用JavaScript动态更新 -->
<script>
    const img = document.querySelector('img');
    function updateImage() {
        img.src = `http://localhost:5000/img/today.jpg?t=${Date.now()}`;
    }
    // 每分钟更新一次
    setInterval(updateImage, 60000);
</script>

高级用法

如果遇到浏览器缓存问题，可以在链接后添加时间戳参数：

http://localhost:5000/img/today.jpg?t=123

注意：大多数情况下不需要添加时间戳，基础链接就能满足需求。

赞赏支持 Donate

如果您觉得这个项目对您有帮助，欢迎赞赏支持 👏