90%图片插不进是src路径错误或混淆img与background-image：img的src相对HTML文件，CSS的url()相对CSS文件；注意协议、大小写、中文路径及MIME类型。

图片插不进去，90% 是 src 路径写错，或把 background-image 和 混用了——这两者语义、行为、路径基准点全都不一样。

用 标签插入内容图片时，src 路径必须相对 HTML 文件

是内容元素，浏览器按 HTML 文件所在位置解析 src。写错路径不会报错，但 Network 面板里能看到 404。

• 图片和 HTML 在同一文件夹：
• 图片在 images/ 子目录：（别加 ./）
• 图片在上一级目录：
• 绝对路径慎用：/images/bg.jpg 在本地双击打开时会找 C:/images/，不是项目目录
• Windows 路径里的反斜杠 \ 必须换成正斜杠 /，否则解析失败

用 CSS background-image 设置背景图时，路径相对 CSS 文件

如果你把样式写在 标签里（即内联 CSS），路径仍以 HTML 文件为基准；但写在外部 .css 文件中时，url() 的路径是相对于该 CSS 文件的位置，不是 HTML。

• HTML 和 CSS 同目录，图片在 images/ 下：background-image: url("images/bg.jpg");
• CSS 在 css/style.css，图片在 images/bg.jpg：要写 url("../images/bg.jpg")
• 别用 file:/// 前缀——只对 的 src 有效，CSS 中无效且会被忽略
• 大小写敏感：Linux/macOS 下 BG.JPG ≠ bg.jpg，本地测试没问题不代表上线能显示

网络图片必须带完整协议，且注意混合内容拦截

外链图片不是“粘贴 URL 就完事”，src 值必须是完整可访问的地址，且协议需与当前页面一致。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• ✅ 正确：
• ❌ 错误：（浏览器当本地路径处理）
• ❌ 错误：（HTTPS 页面加载 HTTP 资源 → Mixed Content 被屏蔽）
• 控制台若出现 Blocked loading mixed active content，立刻检查协议是否统一
• alt 属性不能为空字符串以外的空白值；纯装饰图才用 alt=""，否则必须描述内容

图片不显示但没报错？优先查这三处

很多问题不出现在代码里，而出现在环境或配置细节中。

• 右键 → “检查” → 切到 Network 面板，刷新，看图片请求状态码是不是 200；404 就是路径错，0 就是跨域或协议问题
• 双击打开 HTML 时用的是 file:// 协议，某些服务器策略（如 CORS、Referer 限制）不生效，但图片防盗链可能仍起作用
• 图片文件名含中文或空格？部分旧浏览器或本地文件系统会解码失败，改用英文下划线命名更稳妥
• 默认是行内元素，周围有空白间隙；用 display: block 或 vertical-align: middle 消除

最常被忽略的一点：路径对了、协议对了、文件也存在，但图片还是黑块或空白——十有八九是 MIME 类型错误或图片本身损坏，直接把图片拖进浏览器地址栏试试能否单独打开。能打开，再回来看 HTML；打不开，换图。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！