验证码图片返回404或空白，需先确认请求地址是否拼错（如前端/captcha而实际为/api/captcha）；若404则查路由映射，若200但空白则检查后端是否正确输出二进制流、Content-Type是否设为image/png、有无GZIP压缩干扰。
验证码图片 src 返回 404 或空白怎么办
直接看请求地址是否拼错，尤其是后端生成验证码的接口路径。常见错误是前端写了 /captcha，但后端实际注册的是 /api/captcha 或 /verify/code。用浏览器开发者工具的 Network 面板刷新表单页，点开那个 <img> 的请求，确认状态码和响应内容——如果是 404，优先查路由；如果是 200 但图片为空白，大概率是后端没正确输出二进制图像流（比如误打了调试 print()、返回了 JSON 字符串、或 Content-Type 错设为 text/html）。
Bootstrap 表单里 <img> 标签加了 class="img-fluid" 却不显示
这个 class 本身不会导致加载失败，但会强制约束宽高，如果后端返回的验证码图尺寸极小（比如 80×30），在某些 Bootstrap 版本下可能被压缩成不可见的像素点。试试临时去掉 class="img-fluid"，或显式加 style="width: 120px; height: auto;"。另外检查是否被父容器的 overflow: hidden 截断——比如验证码放在 <div class="input-group"> 里，而该 div 没设足够高度。
点击换图时 onclick="this.src=...+Math.random()" 不生效
这是最常踩的坑：URL 缓存未真正绕过。单纯拼 Math.random() 在部分浏览器或代理下仍可能被缓存。必须确保 URL 参数名有变化，且值不可预测：
onclick="this.src='/api/captcha?r='+Date.now()+'&_='+Math.random()"
更稳妥的做法是用 fetch 触发一次真实请求，再更新 src，避免依赖 URL 参数欺骗缓存：
document.getElementById('captcha-img').onclick = function() {
this.src = '/api/captcha?' + Date.now();
};
注意：如果后端验证码接口要求带 session 或 cookie，务必确认请求头中 credentials: 'include' 已启用（尤其跨域时）。
Spring Boot / Django / Flask 后端返回的验证码图在 Bootstrap 表单里显示为红叉
核心问题是响应头缺失或错误：
- Django：视图函数必须用
HttpResponse返回Content-Type: image/png，不能用JsonResponse或普通render - Flask：用
send_file()或make_response()显式设response.headers['Content-Type'] = 'image/png' - Spring Boot：Controller 方法返回
ResponseEntity<byte[]>，并调用.header(HttpHeaders.CONTENT_TYPE, MediaType.IMAGE_PNG_VALUE)
漏掉 Content-Type，浏览器就当文本渲染，自然报错或显示乱码。另外确认后端没开启 GZIP 压缩图像响应——多数验证码库（如 kaptcha、pytesseract 配合 PIL）输出的是原始字节流，GZIP 会破坏它。
验证码本质是前后端协同的“一次性通道”，问题往往卡在中间某个环节的隐式假设上：前端以为后端返回了图，后端以为前端能正确消费二进制流，而浏览器只认准那几个关键响应头和 URL 状态。多看一眼 Network 面板里的 Headers 和 Preview，比反复改 class 有用得多。
