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。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 临时绕过：在 中加 <meta name="referrer" content="no-referrer">，但仅对当前页所有资源生效，且部分老浏览器不支持
• 更稳做法：把图存自己服务器，用相对路径引用（如 src="/i/avatar.png"），彻底避开跨域和 referrer 检查
• 注意：no-referrer 不影响脚本动态设置 img.src，但会影响页面初始加载时的 src 请求

video/audio 的 src 也适用同一套路径规则，但防盗链更难防

<video></video> 和 <audio></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 —— 别猜，直接看那里。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！