<p>使用 Math.random() 配合图片数组可实现轻量随机换图；通过 Math.floor(Math.random() * arr.length) 生成合法索引，结合 sessionStorage 记录上一次索引实现短周期去重，避免连续刷新重复。</p>
直接用 Math.random() 配合图片数组赋值给 img.src 就能实现最轻量、兼容性最好、也最容易调试的随机图片显示——不需要框架、不依赖服务器重定向、也不用额外请求 API。
怎么用 JavaScript 一次性随机换图
适用于首页 Banner、提示图、头像占位等「加载即随机，之后不再变」的场景。核心是生成一个合法索引，从图片路径数组里取一个值塞进 img.src。
- 必须先获取到
<img>元素，推荐用document.querySelector("img")或带id的document.getElementById("myImg") - 图片路径数组建议写成绝对路径或相对于当前 HTML 的相对路径，避免因 JS 执行位置不同导致 404
-
Math.random()返回 [0, 1) 区间浮点数，要转成整数索引得用Math.floor(Math.random() * arr.length)，别漏了.length - 如果图片没加载出来，先检查浏览器控制台是否报
404（路径错）、blocked mixed content（HTTP/HTTPS 混合）
示例代码片段：
const images = [
"./pics/photo-1.jpg",
"./pics/photo-2.png",
"./pics/photo-3.webp"
];
const imgEl = document.querySelector("img");
const randomIndex = Math.floor(Math.random() * images.length);
imgEl.src = images[randomIndex];
怎么让图片每次刷新都换，但避免重复（短周期去重）
用户连续刷新页面时，如果只靠 Math.random()，大概率会看到相同图片——不是 bug，是概率问题。简单去重要在客户端记一次“上一张”，并排除它。
立即学习“前端免费学习笔记（深入）”；
Html To Pdf
下载
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
- 用
sessionStorage存上一次选中的索引，下次生成时跳过该索引（仅限数组长度 ≥ 2） - 如果数组只有 1 张图，强行去重会导致逻辑卡死，得提前判断
- 注意：不要用
localStorage，它跨会话持久，用户关掉标签再打开还是“不能重复”，体验反而差 - 重试次数建议限制在 5 次以内，防止极端情况（比如 3 张图却连续抽中前两张）陷入死循环
关键逻辑节选：
let lastIndex = parseInt(sessionStorage.getItem("lastRandomIndex")) || -1;
let randomIndex;
for (let i = 0; i < 5; i++) {
randomIndex = Math.floor(Math.random() * images.length);
if (randomIndex !== lastIndex) break;
}
sessionStorage.setItem("lastRandomIndex", randomIndex.toString());
imgEl.src = images[randomIndex];
用 API 加载远程随机图（如 Unsplash、API-Ninjas）要注意什么
这类方案适合需要主题化、高质量、无需自己托管图源的场景，但引入了网络请求失败、跨域、配额和响应结构不稳定等新变量。
- Unsplash 的
https://source.unsplash.com/random/?nature不保证返回图片，可能跳转到网页（尤其加中文关键词时），务必加onerror回退逻辑 - API-Ninjas 要求
X-Api-Key请求头，前端直接暴露 key 有风险；更安全的做法是走你自己的代理接口，或改用服务端渲染 - 所有 API 响应都是 JSON，必须解析出
url字段（例如data.url或data.image），不同 API 字段名不同，别硬编码 - 务必加
img.onerror和fetch().catch()，否则请求失败时页面留白，用户不知道发生了什么
为什么不用 HTTP 302 重定向方式
虽然服务端 302 重定向（如 PHP 返回 header("Location: ...")）能实现「URL 不变但图变」，但它在现代前端开发中已明显过时。
- 无法做客户端逻辑干预：比如想根据屏幕尺寸加载
@2x图、或按用户偏好过滤类别，重定向链路里做不到 - 不利于调试：浏览器开发者工具的 Network 面板里只看到一次请求，实际图片 URL 被隐藏，排查 404 或慢加载很困难
- CDN 和中间代理可能缓存 302 响应（尤其误配了
Cache-Control），导致「随机」失效 - 单页应用（SPA）中，
<img src="/api/random">这种写法在路由切换后不会自动重新请求，而 JS 主动触发则可控得多
真正需要隐藏真实图片地址的场景极少，绝大多数情况下，把随机逻辑放在前端更透明、更灵活、也更容易和用户行为联动（比如点击换图、悬停预加载下一张）。
