图片加载问题主因是路径错误、缺少宽高致布局抖动、CORS限制、现代格式兼容性差及缓存异常；应使用绝对路径、显式设置宽高、配置CORS、确保picture含img兜底，并通过Network面板综合排查。
图片 src 路径错导致 404 或空白
浏览器控制台报 Failed to load resource: the server responded with a status of 404 (Not Found)，基本就是路径写错了。相对路径容易受当前 HTML 文件位置影响，比如在 /pages/detail.html 里写 src="img/logo.png"，实际会请求 /pages/img/logo.png，而非你预期的根目录下的 /img/logo.png。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用以
/开头的绝对路径（从域名根开始），如src="/img/logo.png" - 开发时打开浏览器「Network」面板，点开图片请求，看「Initiator」和「Preview」确认真实请求地址和返回内容
- 避免用
../嵌套跳转，尤其项目路由变多后极易失效
img 标签缺少 alt 或 width/height 引发布局抖动
没设宽高时，浏览器先渲染文字流，等图片加载完成才重绘，造成页面“突然下移”——用户正在读文字，下面内容就跳了。这不是加载失败，但属于视觉层面的“加载失败体验”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 始终显式写
width和height（可为具体像素值或使用 CSS aspect-ratio 替代） -
alt不是可选项：它影响可访问性，也决定图片加载失败时显示什么文字 - 服务端返回的图片 URL 若带参数（如
?v=202405），确保 CDN 或 Nginx 没因参数拒绝缓存
跨域图片被 CORS 阻止，canvas 绘制或 fetch 读取失败
想用 JS 读取图片像素（比如做水印检测、缩略图生成），但控制台报 Unable to get image data from canvas because the canvas has been tainted by cross-origin data，说明图片资源服务器没返回 Access-Control-Allow-Origin 头。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 前端无法绕过该限制；要么让图片源支持 CORS（加响应头），要么改用代理（如本地
/api/proxy?url=...） - 用
img.crossOrigin = "anonymous"是必要步骤，但不解决根本问题——它只是告诉浏览器“我想走 CORS 流程”，服务端不配合照样失败 - 注意：即使图片正常显示，也不代表能被 JS 安全读取；显示成功 ≠ CORS 通过
现代格式图片（WebP/AVIF）在旧浏览器中 fallback 失败
写了 <picture> 但 Safari 13 以下或 IE 完全不显示图片，不是语法错，而是 <source> 的 type 属性被忽略，且没有兜底的 <img> 标签。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
<picture>必须包含一个末尾的<img>标签，它是所有浏览器的最终 fallback - 不要只靠
type="image/webp"，Safari 早期版本识别有问题；可结合media="(min-width: 1px)"强制触发 - 构建时用工具（如 sharp）批量生成多格式，但上线前务必手动用 Safari/Edge 旧版验证
<picture>行为
最麻烦的不是图片不显示，而是它“有时显示有时不”，比如缓存策略冲突、CDN 缓存了 404 响应、或者图片服务限流返回空响应——这些不会报红字错误，但用户就是看不到图。查的时候得盯住 Network 面板里的 Status、Size、Timing 三栏，别只看 Console。
