图片不显示主因是路径错误：先用浏览器Network面板确认404请求，检查Request URL与实际文件位置是否匹配；统一用./开头相对路径并启用HTTP服务调试。
图片路径写错导致 404，怎么快速定位
本地开发时图片不显示，八成是 src 路径没写对。浏览器控制台里看到 GET http://.../img/logo.png 404 就是铁证。
常见错误包括：
-
src="img/logo.png"在 HTML 文件位于根目录时才有效；如果 HTML 在/pages/about.html，那实际会请求/pages/img/logo.png - 用了绝对路径但漏了开头斜杠，比如
src="img/logo.png"应该是src="/img/logo.png"（从根开始） - 大小写敏感：Linux 服务器上
Logo.png和logo.png是两个文件 - 开发用 VS Code 的「Live Server」插件时，它默认以项目根为 Web 根目录，所以统一用
/img/xxx.jpg最稳
用 srcset + sizes 实现真正响应式缩放
只靠 width: 100%; height: auto; 是“等比拉伸”，不是“按设备选最适图”。真响应式得让浏览器自己挑分辨率合适的图源。
关键不是塞一堆图片，而是告诉浏览器：“在不同视口宽度下，这张图占多宽，有哪些图可选”：
立即学习“前端免费学习笔记（深入）”；
-
srcset列出多个图源及它们的像素密度或宽度，例如：srcset="/img/photo-400w.jpg 400w, /img/photo-800w.jpg 800w, /img/photo-1200w.jpg 1200w" -
sizes描述“在什么条件下，这张图会渲染成多宽”，例如：sizes="(max-width: 480px) 100vw, (max-width: 960px) 50vw, 300px" - 必须保留
src作为兜底——老浏览器或 JS 关闭时 fallback - 别滥用：单张图够用就别上
srcset；图标类小图用 CSSbackground-image+@media更轻量
img 缺少 alt 会出什么问题
不是“SEO 建议”，而是硬性可访问性要求。屏幕阅读器、图片加载失败、甚至某些爬虫都依赖 alt。
写法有明确边界：
- 纯装饰图用
alt=""（空字符串），不是删掉属性，也不是写alt="decorative" - 信息图、图表必须描述核心结论，例如：
alt="柱状图：2023 年 Q3 用户留存率比 Q2 上升 12%，达 47%" - 含链接的图，
alt应说明链接目的，如：alt="跳转至 GitHub 仓库"，而不是"GitHub logo" - VS Code 插件「axe DevTools」或 Lighthouse 审计能直接报出缺失
alt的img
现代方案：用 picture 元素切换格式与裁剪
当需要为不同设备提供不同尺寸、不同格式（如 WebP）、甚至不同构图的图时，img 单一标签不够用，得用 picture。
结构固定，顺序不能错：
- 每个
source按从高到低优先级排列，浏览器取第一个匹配的 -
media控制视口条件，type控制 MIME 类型，srcset+sizes照常支持 -
img标签必须放在picture最后，作为最终 fallback - 示例：
<picture> <source media="(min-width: 768px)" srcset="/img/hero-desktop.webp" type="image/webp"> <source media="(min-width: 768px)" srcset="/img/hero-desktop.jpg" type="image/jpeg"> <source srcset="/img/hero-mobile.webp" type="image/webp"> <img src="/img/hero-mobile.jpg" alt="活动主视觉"> </picture>
- 注意：Safari 对
type="image/webp"支持较晚（iOS 14.4+），旧版本会跳过直接走img
WebP 和 AVIF 虽然体积小，但生成时压缩参数调太激进会导致边缘发虚，建议用 cwebp -q 80 或 Squoosh 手动试压再上线。
