HTML图片无法正常显示怎么办？img元素src与alt属性配置详细说明

图片不显示主因是src路径错误或alt缺失：src为空、缺失或路径无效导致元素被跳过，无占位框且不报错；alt缺失则违反可访问性规范，影响SEO与屏幕阅读器。

图片不显示，90% 是 src 路径写错或 alt 缺失——不是浏览器问题，是路径没对上、标签没写全。

为什么 img 标签写了却完全不渲染？

浏览器遇到 <img> 时，src 是强制要求的：空值、缺失、只写文件名不带扩展名（如 src="logo"），都会导致元素被跳过，连空白占位框都不出现，控制台也不报错。

1. src 必须是完整可访问的路径或 URL，比如 src="img/logo.png"、src="/assets/icon.svg"、src="https://cdn.example.com/photo.jpg"
2. 本地双击打开 HTML 文件（file:// 协议）时，远程 http:// 图片会被拦截；HTTPS 页面里写 http:// 图片会触发混合内容警告，直接静默失败
3. 别用 <image> 或 <img></img>——<img> 是自闭合标签，写结束标签反而破坏解析

相对路径怎么写才不会在不同目录下失效？

src 的相对路径永远以当前 HTML 文件所在位置为起点计算，不是以项目根目录、也不是以服务器 root 为准。

1. HTML 在 /pages/about.html，图片在 /assets/logo.png → 写 src="../../assets/logo.png"（向上两层，再进 assets）
2. HTML 和图片同级 → 直接 src="photo.jpg"
3. 图片在子目录 img/ 下 → src="img/banner.webp"（不用加 ./，加了也行但冗余）
4. 大小写必须完全一致：Linux 服务器上 Logo.png ≠ logo.png，404 不提示原因，只报“未找到”

alt 属性不是“可选说明”，而是语义刚需

缺失 alt 不影响加载，但会让屏幕阅读器无法描述图片、SEO 丢失关键信号、图片加载失败时用户什么也看不到。

1. 有信息量的图（如产品截图、流程图）→ 写具体描述：
2. 纯装饰性图标（如分隔线、按钮小图标）→ 明确写 ，告诉辅助技术跳过
3. 千万别写 、 或堆砌关键词，等于放弃语义价值
4. alt 不是 title 的后备：没写 alt 时，title 不会自动补上；两者作用完全不同

调试时该看哪里？别猜路径，直接看 Network 面板

打开浏览器开发者工具 → Network 标签页 → 刷新页面 → 筛选 Img 类型 → 找到对应请求，看它的 Status 和 Request URL。

1. 状态码 404 → 路径确实不存在，按上面规则重算相对路径，或改用根路径 /assets/xxx.png
2. 状态码 403 → 服务器拒绝访问，常见于 Nginx/Apache 未配置静态资源目录权限，或文件夹缺少 index.html 导致目录浏览被禁
3. 请求 URL 显示 file:///C:/... → 你双击打开了 HTML，但用了本地绝对路径，立刻删掉，改用相对路径
4. 请求发到了错误域名或协议 → 检查是否漏了 https://，或用了 // 协议相对地址但上下文不匹配

真正容易被忽略的是：构建工具（如 Vite/Webpack）会重写 src 中的路径，但只处理 src 值为相对路径或 public/ 下的资源；如果你把图放在 src/assets/ 却用 src="/logo.png"，它不会被识别，也不会报错，只是静静 404。