在线运行工具图片不显示几乎全是路径问题，因工具不支持本地文件或file:///协议，必须使用可公开访问的HTTP(S)资源，如网络图片、工具内置上传生成的HTTPS链接或Base64编码。
在线运行工具（如 JSFiddle、CodePen、JSBin、Playcode 等）里图片不显示，**几乎全是路径问题**——这些工具不读取你本地磁盘文件，也不支持 file:/// 协议或绝对路径，必须用浏览器能直接 fetch 到的资源。
为什么 src="./images/logo.png" 在线运行时总报 404
因为在线编辑器没有“当前目录”概念。它只认三种路径：
-
src值是相对路径（如"images/logo.png"）时，编辑器会尝试从它自己的 CDN 或沙箱根目录下找，而你的图片根本没上传过去； -
src是本地绝对路径（如"C:/project/logo.png"）或带file:///前缀，浏览器直接拦截，控制台报Not allowed to load local resource； - 即使你把图片拖进 CodePen 的 Assets 面板，它生成的是一个托管 URL，不是你想象中的“同目录”，必须复制粘贴那个实际链接。
在线工具中引入图片的唯一可靠方式
所有主流在线运行工具都要求图片资源可被公开 HTTP(S) 访问。实操只有这几种路子：
- 用网络图片：直接填公开 URL，比如
src="https://http.cat/404"—— 快、零配置，适合演示和调试； - 上传到工具内置资源管理区：例如 CodePen 的 “Assets” 标签页、JSFiddle 的 “Resources” → “Add Resource”，上传后自动给出 HTTPS 链接，必须复制这个链接，不能自己拼路径；
- 用 Base64：适合小图标（src="data:image/png;base64,iVBOR..." —— 不发请求，但污染 HTML，别用于大图；
- 避免用
background-image临时“绕过”：虽然 CSS 里写url(./bg.jpg)看似能写，但同样会 404，除非你把它也作为外部资源添加。
onerror 在线环境里特别有用
在线编辑时 URL 经常手误或链接失效，光看空白很难判断是代码错还是资源错。加个 onerror 能快速定位：
立即学习“前端免费学习笔记（深入）”；
<img src="https://example.com/missing.jpg"
alt="示例图"
onerror="this.src='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">❌</text></svg>'; this.alt='图片加载失败'">
这样一旦地址不对，立刻显示 SVG 占位符和提示文字，省得反复切开发者工具看 Network 面板。
真正容易被忽略的是：在线工具之间资源机制不互通。你在 JSFiddle 上传的图，在 CodePen 里粘贴同一个路径绝对无效；哪怕同个工具，每次新建项目也要重新上传或重新获取链接。路径不是“写对就行”，而是“工具给你什么，你就用什么”。
