src 是浏览器按文件系统路径解析资源的指令，需严格匹配真实路径；防盗链失效常因 src 跨域请求自动携带 Referer 被拦截，而非未配置 referrer。
src 属性不是“粘贴网址就行”，它本质是浏览器按文件系统路径找资源的指令；防盗链失效往往不是因为没加 referrer，而是你根本没意识到 src 请求本身会暴露 referrer。
src 路径写错：90% 的“图片不显示”都卡在这三类关系上
浏览器解析 <img> 时，src 值会被拼接到当前 HTML 文件所在目录下，形成最终请求地址。它不认“你脑子里想的位置”，只认“文件系统里真实存在的路径”。
- 同级：HTML 和
logo.png都在/project/下 →src="logo.png" - 子目录：
photo.jpg在/project/images/→src="images/photo.jpg" - 上级：HTML 在
/project/pages/，图在/project/assets/→src="../assets/photo.jpg"
常见错误包括：src="C:\my\photo.jpg"（本地绝对路径，上线必挂）、src="https://example.com/photo.jpg"（未确认对方是否允许外链）、src="Photo.JPG"（大小写不一致，Linux 服务器直接 404）。
src 引用外部图片返回 403 Forbidden：不是链接坏了，是被防盗链拦截了
当浏览器用 src 加载跨域图片时，会自动带上 Referer 请求头（值为当前页面 URL）。很多图床或 CDN 会检查这个头，非白名单域名就直接返回 403 Forbidden。
立即学习“前端免费学习笔记（深入）”；
- 临时绕过：在
<head>中加<meta name="referrer" content="no-referrer">，但仅对当前页所有资源生效，且部分老浏览器不支持 - 更稳做法：把图存自己服务器，用相对路径引用（如
src="/i/avatar.png"），彻底避开跨域和 referrer 检查 - 注意：
no-referrer不影响脚本动态设置img.src，但会影响页面初始加载时的src请求
video/audio 的 src 也适用同一套路径规则，但防盗链更难防
<video> 和 <audio> 的 src 解析逻辑和 <img> 完全一致：相对路径基于 HTML 所在位置，绝对路径走完整 URL。但视频资源体积大、易被下载，单纯靠 referrer 防盗链基本无效。
- 伪造
Referer对下载工具毫无压力，curl -H "Referer: https://yoursite.com" ...就能绕过 - 真正有效的做法是服务端校验 + 前端 Blob 化：后端签发带时效的临时 URL（如
/v/abc123.mp4?t=1746091320&s=xxx），前端用fetch拿到二进制流后生成Blob，再用URL.createObjectURL()赋给video.src - 此时开发者工具 Network 面板看到的是
blob:https://yoursite.com/xxx，原始地址已不可见，但注意该 Blob 会在页面卸载时自动释放
容易被忽略的关键点：src 的解析时机与缓存行为
src 值在标签插入 DOM 后立即触发请求，不是等到 JS 执行完才开始。这意味着：
- 动态改
img.src会立刻发起新请求，旧请求不会自动取消（可能造成带宽浪费） - 浏览器对
src请求强缓存，即使你改了图片文件内容，只要 URL 没变，用户就看不到更新 —— 常见解法是在路径后加版本参数：src="icon.png?v=2.1.0" -
src不支持 CSS 中的url()语法（比如不能写src="url(./img.svg)"），必须是纯路径字符串
最常被漏掉的其实是路径和文件名的精确匹配：多一个空格、少一个点、扩展名写成 .jgp，浏览器就只会显示 alt 文字，控制台 Network 标签里清清楚楚标着 404 —— 别猜，直接看那里。
