图片地址能在新标签页打开，放进网页却不显示，应该先查哪里？下面做一个不依赖框架的图片预览页，用加载事件、图片尺寸和浏览器 Network 面板，区分地址问题、响应问题与页面问题。
示例图源采用 ImgFox 的公开教程截图。完整页面不需要登录图床，也不调用上传接口；把输入框换成自己的图片 URL，即可检查实际嵌入结果。本文没有对不同图床做性能比较。
1. 从“获取链接”面板取出纯 URL
ImgFox 网页端可在选中图片后打开“获取链接”，切换 URL、HTML、Markdown 等输出。开发页面时，要取出纯图片 URL，再交给img.src，不要把整段 HTML 或 Markdown 赋给它。
图源：ImgFox 公开教程。下方代码使用的就是这张截图的图片地址。
https://www.imgfox.cn/tutorial/step5.png资源路径能用来定位图片，不能据此判断存在公开上传 API。文件名以 .png 结尾也不保证服务器一定返回图片，仍需检查实际响应。
2. 可复制的最小预览页
将代码保存为 UTF-8 编码的image-check.html后在浏览器打开。代码先绑定事件、加入页面，再设置图片地址；多次点击检查时，只显示当前图片的结果，避免较早请求覆盖新状态。
<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>图片外链检查</title> <style> body { max-width: 840px; margin: 24px auto; padding: 0 16px; } input { box-sizing: border-box; width: 100%; margin: 12px 0; } #preview img { display: block; width: min(100%, 720px); height: auto; } pre { white-space: pre-wrap; overflow-wrap: anywhere; } </style> </head> <body> <label for="url">图片 URL</label> <input id="url" value="https://www.imgfox.cn/tutorial/step5.png"> <button id="check" type="button">检查图片</button> <pre id="result" aria-live="polite">点击按钮开始检查。</pre> <div id="preview"></div> <script> const input = document.querySelector('#url'); const result = document.querySelector('#result'); const preview = document.querySelector('#preview'); document.querySelector('#check').addEventListener('click', () => { preview.replaceChildren(); let url; try { url = new URL(input.value.trim()); if (!['http:', 'https:'].includes(url.protocol)) throw new Error(); } catch { result.textContent = '请输入完整的 HTTP 或 HTTPS 图片地址。'; return; } const img = new Image(); img.alt = '待检查的图片'; result.textContent = '正在请求图片……'; img.addEventListener('load', () => { if (preview.firstElementChild !== img) return; const box = img.getBoundingClientRect(); result.textContent = JSON.stringify({ event: 'load', naturalSize: [img.naturalWidth, img.naturalHeight], renderedSize: [Math.round(box.width), Math.round(box.height)] }, null, 2); }); img.addEventListener('error', () => { if (preview.firstElementChild !== img) return; result.textContent = '图片加载失败，请检查 Network 和 Console。'; }); preview.append(img); img.src = url.href; }); </script> </body> </html>3. 怎么读检查结果？
点击按钮后，若加载成功，页面显示图片及两组尺寸：naturalSize为固有尺寸，renderedSize为页面当时的展示尺寸。窄窗口会让展示宽度缩小，但本例始终请求同一个 URL，CSS 不会因此重新编码原图或减少文件字节数。
固有尺寸的单位是 CSS 像素，并非文件大小；无法取得固有宽度时，naturalWidth可能为 0。见 MDN：naturalWidth。展示尺寸还可能受父容器与样式影响，因此要结合页面观察。
不要只用img.complete判断成功：损坏或加载失败的图片也可能处于 complete 状态。本例通过当前图片的 load/error 事件区分结果，未把 complete 当成成功条件。见 MDN：complete。
可以做三次小实验，验证自己理解的是哪一层，而不是只看“有没有裂图图标”。下表是检查方法与预期观察，不是已经测得的网络结果：
| 操作 | 观察重点 |
|---|---|
| 保留默认地址，点击检查 | 当前网络能够加载图片时，应出现截图、load 状态和两组尺寸 |
| 输入“这不是网址”，再次点击 | 页面应提示输入完整地址，不发起新的图片请求 |
| 把示例 CSS 的 display:block 改为 display:none，重新打开文件并检查 | 图片仍可能加载成功，但布局尺寸为零、页面看不到图 |
最后一个实验说明：资源加载成功与页面可见是两个判断。实验后把样式恢复，再检查自己的实际页面。若要观察重复加载，不要把缓存命中误认为没有请求；开发者工具可能显示“来自内存缓存”或“来自磁盘缓存”，需要结合请求条目一起读。
4. 按地址、响应、页面三层排错
第一层：输入是否是图片资源。先单独打开 URL，核对内容与预期是否一致。后台管理地址、分享页和本地文件路径，都不能直接当成公开图片资源使用。地址末尾混入标点也可能导致路径变化。
第二层：浏览器收到什么。打开开发者工具的 Network 面板，再点击“检查图片”，定位请求，查看最终地址、状态码、Content-Type 与 Preview。响应类型描述返回内容；如果实际拿到的是 HTML 登录页，即使状态码为 200，也不能据此认为图片加载成功。参见 MDN：Content-Type。
| 观察到的现象 | 下一步 |
|---|---|
| 找不到对应请求 | 检查点击事件是否执行、Console 是否报错、src 是否赋值 |
| 404 | 核对资源路径与文件是否仍存在 |
| 403 | 查看响应说明与访问规则，不直接断言原因就是防盗链 |
| 200，但预览为网页或错误内容 | 检查复制的地址及重定向结果 |
| 请求成功，图片可解码但页面看不到 | 转到 Elements 检查元素、尺寸、遮挡与父容器样式 |
第三层：图片如何被页面展示。确认 img 元素存在、src 正确，检查 display、宽高以及祖先元素的可见性。如果测试页正常、内容平台编辑器中失败，还需检查平台是否移除了标签、代理了图片或限制了外部资源。
5. 普通展示与 canvas 处理要分开验证
本例只用 img 展示图片，没有 fetch 读取响应，也没有 canvas 像素操作。图片能显示，不意味着脚本可以跨源读取其像素。需要 canvas 读取或导出时，必须另行核对服务器跨域许可；单独添加crossorigin="anonymous"并不能替服务器授权。
这属于浏览器通用机制，不是对 ImgFox 防盗链或跨域配置能力的说明。依据见 MDN：跨源图片与 canvas及 img 元素说明。
排查记录保留“失败页面、图片 URL、请求状态、响应类型、控制台提示”即可。先确认错误发生在哪一层，再调整代码，比只看到裂图就反复更换图片地址更容易定位问题。
截图来源：ImgFox 公开教程图片。资料核对日期：2026 年 10 月 19 日。本文的示例结果以读者浏览器实际加载情况为准。
