图片不显示主因是src路径错误或alt缺失：src为空、缺失或路径无效导致元素被跳过，无占位框且不报错；alt缺失则违反可访问性规范，影响SEO与屏幕阅读器。
图片不显示，90% 是 src 路径写错或 alt 缺失——不是浏览器问题，是路径没对上、标签没写全。
为什么 img 标签写了却完全不渲染？
浏览器遇到 <img alt="HTML图片无法正常显示怎么办？img元素src与alt属性配置详解" > 时，src 是强制要求的：空值、缺失、只写文件名不带扩展名（如 src="logo"），都会导致元素被跳过，连空白占位框都不出现，控制台也不报错。
-
src必须是完整可访问的路径或 URL，比如src="img/logo.png"、src="/assets/icon.svg"、src="https://cdn.example.com/photo.jpg" - 本地双击打开 HTML 文件（
file://协议）时，远程http://图片会被拦截；HTTPS 页面里写http://图片会触发混合内容警告，直接静默失败 - 别用
<image></image>或<img alt="HTML图片无法正常显示怎么办？img元素src与alt属性配置详解" >——<img alt="HTML图片无法正常显示怎么办？img元素src与alt属性配置详解" >是自闭合标签，写结束标签反而破坏解析
相对路径怎么写才不会在不同目录下失效？
src 的相对路径永远以当前 HTML 文件所在位置为起点计算，不是以项目根目录、也不是以服务器 root 为准。
- HTML 在
/pages/about.html，图片在/assets/logo.png→ 写src="../../assets/logo.png"（向上两层，再进 assets） - HTML 和图片同级 → 直接
src="photo.jpg" - 图片在子目录
img/下 →src="img/banner.webp"（不用加./，加了也行但冗余） - 大小写必须完全一致：Linux 服务器上
Logo.png≠logo.png，404 不提示原因，只报“未找到”
alt 属性不是“可选说明”，而是语义刚需
缺失 alt 不影响加载，但会让屏幕阅读器无法描述图片、SEO 丢失关键信号、图片加载失败时用户什么也看不到。
立即学习“前端免费学习笔记（深入）”；
- 有信息量的图（如产品截图、流程图）→ 写具体描述：
alt="React Suspense 边界组件结构示意图" - 纯装饰性图标（如分隔线、按钮小图标）→ 明确写
alt=""，告诉辅助技术跳过 - 千万别写
alt="图片"、alt="logo"或堆砌关键词，等于放弃语义价值 -
alt不是title的后备：没写alt时，title不会自动补上；两者作用完全不同
调试时该看哪里？别猜路径，直接看 Network 面板
打开浏览器开发者工具 → Network 标签页 → 刷新页面 → 筛选 Img 类型 → 找到对应请求，看它的 Status 和 Request URL。
- 状态码
404→ 路径确实不存在，按上面规则重算相对路径，或改用根路径/assets/xxx.png - 状态码
403→ 服务器拒绝访问，常见于 Nginx/Apache 未配置静态资源目录权限，或文件夹缺少index.html导致目录浏览被禁 - 请求 URL 显示
file:///C:/...→ 你双击打开了 HTML，但用了本地绝对路径，立刻删掉，改用相对路径 - 请求发到了错误域名或协议 → 检查是否漏了
https://，或用了//协议相对地址但上下文不匹配
真正容易被忽略的是：构建工具（如 Vite/Webpack）会重写 src 中的路径，但只处理 src 值为相对路径或 public/ 下的资源；如果你把图放在 src/assets/ 却用 src="/logo.png"，它不会被识别，也不会报错，只是静静 404。
