验证码图片点击无反应，根本原因是浏览器缓存导致url未变更，必须在请求路径后拼接唯一时间戳参数（如?timestamp=1721126880123）强制刷新；同时需确保dom加载完成后再绑定事件、响应头含正确content-type且状态码为200。

验证码图片点击刷新没反应，大概率是缓存没破

浏览器把 /getImageCode 当成静态资源缓存了，哪怕你反复给 src 赋相同值，它也不会发新请求。这不是 JS 错误，是 HTTP 缓存机制在起作用。

• 必须在 URL 后拼唯一参数，最常用的是时间戳：/getImageCode?timestamp=1721126880123
• 别用 Math.random()——某些代理或 CDN 会截断小数点后部分，导致重复
• 确保每次点击都生成新值，不能只在页面加载时算一次
• 如果后端支持，也可加 Cache-Control: no-cache 响应头，但前端加参数更可靠

img 标签绑定 click 事件失败，先看父容器是否可交互

<img> 本身没有默认点击行为，事件得靠 JS 绑定。但常见错误是绑在了错误目标上：

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

• 直接写 <img onclick="..."> —— 不推荐，依赖全局函数且难调试
• 用 document.getElementById('imgVcode').addEventListener('click', ...) —— 如果 DOM 没加载完就执行，返回 null，监听器根本没挂上
• 正确做法是监听父容器（如 <div id="imgDiv">），它更稳定，且能捕获冒泡事件 <li>确认父容器没设 <code>pointer-events: none，否则整个区域都点不动

后端接口返回 304 或 200 但图片不更新，检查响应头和 MIME 类型

即使 URL 带了时间戳，如果后端没正确响应，前端仍可能复用旧缓存或渲染失败：

• 响应状态码不是 200（比如 304 Not Modified）→ 检查后端是否误判了 ETag/Last-Modified
• 响应头缺失 Content-Type: image/png（或对应类型）→ 浏览器可能拒识为图片，<img> 显示空白或 broken 图标
• 后端返回了 HTML 内容（比如登录跳转页）却伪装成图片 → 打开 DevTools 的 Network 面板，点开该请求，看 Preview 是否真是一张图
• 跨域场景下，若后端没配 Access-Control-Allow-Origin，控制台会报 CORS 错误，但图片可能静默失败

表单内验证码按钮点不动？警惕 type 属性和默认行为冲突

如果验证码 <img> 在 <form></form> 里，且旁边有 <button></button>，容易误触表单提交：

• 按钮没写 type="button" → 默认是 type="submit"，一点击就触发表单提交，页面刷新，JS 中断
• 没调 event.preventDefault() → 即使绑了 click，提交行为仍会执行
• 验证码刷新逻辑写在 submit 事件里？错——那是提交前校验时机，不是点击图片的时机
• 验证逻辑应独立于表单：图片点击只负责换图，校验留在提交时做（比如比对输入值 + 后端 session key）
实际调试时，最常被忽略的是 Network 面板里那个“Initiator”列——它能告诉你是谁触发了请求，是 JS 脚本、用户点击，还是页面自动加载。点不动的时候，先看这里有没有请求发出，再决定往 JS 还是后端查。