预览图片失败的根本原因是URL不可直接访问，需确保后端返回完整可访问URL或前端拼接为绝对路径，并验证其能在浏览器地址栏打开；同时排查Nginx配置、跨域、鉴权及DOM/CSS渲染问题。
上传成功后预览图片，关键不是等 done 回调里直接塞 res.data.url 到 <img>，而是先确认这个 URL 能被浏览器直接加载——否则静默失败，控制台只报 net::ERR_FAILED，你根本不知道图哪去了。
done 里赋值 img.src 前必须验证 URL 可访问
后端返回的地址极大概率是相对路径（比如 /upload/abc.jpg），直接塞进 src 会变成 http://localhost/upload/abc.jpg（开发环境）或 https://yourdomain.com/upload/abc.jpg（生产环境）。但如果你的静态资源服务没配好、Nginx 没转发 /upload 路径、或者后端返回的是绝对路径却漏了协议（如 //cdn.example.com/img.jpg），浏览器就加载不了。
- 最稳妥做法：用
location.origin + res.data.url拼完整地址，前提是后端返回的是纯路径（不含协议和域名） - 更健壮做法：后端统一返回完整可访问 URL（含
https://），前端不做拼接，直接信任使用 - 调试时快速验证：把
res.data.url粘到浏览器地址栏敲回车，能打开图 → 前端代码没问题；打不开 → 问题在后端路径或服务配置
预览图显示为空白或 404 的硬性原因
常见表象是 <img> 标签存在，但一片空白，右键“查看图片”提示 404 或跨域错误。这不是 JS 写错了，而是路径或权限没兜住：
-
res.data.url是相对路径，但当前页面 URL 是https://a.com/admin/user/edit?id=123，浏览器会尝试请求https://a.com/admin/user/upload/abc.jpg（路径补全规则），而非你预期的根路径 - 后端返回了
http://127.0.0.1:8080/upload/abc.jpg这种本地地址，前端部署在正式域名下，跨域且不可达 - 图片确实写入磁盘了，但 Web 服务器（如 Nginx）没配置
location /upload指向对应目录，返回 404 - 后端接口用了临时 token 鉴权（如
/upload/abc.jpg?token=xxx），但 token 过期或校验失败，返回 401/403
别依赖 preview 回调做上传后预览
preview 回调（Layui 2.8+）只在用户选择文件**瞬间**触发，传入的是本地 File 对象生成的 base64 或 blob 地址，跟上传成功无关。它不是“上传完成后的预览钩子”，误用会导致：
- 在
done里又调一次obj.preview()→ 报错，因为此时obj.files已清空或不可读 - 以为
preview能拿到服务器返回的图 → 实际拿不到，它压根不接触响应数据 - 安卓 WebView 下
preview回调可能不触发，导致整个预览逻辑失效
DOM 和样式没兜住，再对的 URL 也白搭
URL 正确、网络通、服务正常，但图还是不显示？八成是 DOM 层级或 CSS 问题：
-
<img>被父容器设了overflow: hidden，大图直接被裁掉 - 没设
max-width: 100%; height: auto;，图撑爆容器或高度塌陷 - 目标元素用
display: none或visibility: hidden隐藏着，src赋值了也看不见 - 预览区域是动态插入的（如表格某单元格），但插入时没触发重绘，需手动
img.style.display = 'block'或加个offsetHeight强制重排
真正容易被忽略的是：上传成功后，你看到的“预览图”其实是个脆弱的链条——后端路径配置、前端拼接逻辑、浏览器加载策略、DOM 渲染时机，任一环断掉，用户就只能对着空白发呆。别只盯着 JS 回调写对没，先确保那串 URL 在浏览器里能亲手点开。
