HTML网页中响应式图片防盗链与占位符的使用技巧-html教程-PHP中文网

srcset 与 referrerpolicy 必须配合使用才能绕过防盗链，单独 srcset 无效；需设 referrerpolicy="origin-when-cross-origin" 并用 aspect-ratio 预留空间，onerror 回退需加 crossorigin="anonymous"。

html网页中响应式图片防盗链与占位符的使用技巧

srcset + referrerpolicy 一起用才能绕过防盗链

单纯写 srcset 不会自动解决防盗链问题，关键在于浏览器对每个 srcset 候选项发起请求时，仍会携带 Referer。如果目标服务器校验 Referer，且你页面域名不在白名单里，所有候选项都会返回 403。

必须显式设置 referrerpolicy 属性，控制单个的 Referer 行为：

referrerpolicy="no-referrer"：最彻底，完全不发 Referer，但会丢失来源信息（如统计、AB 测试）
referrerpolicy="origin-when-cross-origin"：跨域时只发域名，兼顾兼容性与基本隐私，推荐日常使用
不要全局设，它会影响所有请求（包括 API、字体、脚本），范围过大易出问题

示例写法：

@@##@@

占位符必须撑开空间，否则 layout shift 无法避免

很多开发者以为加个灰色背景就算占位了，结果图片加载后文字上推——根本原因是容器没预留高度，浏览器渲染流里“盒模型缺失”，强制重排不可避免。

现代方案优先用 CSS aspect-ratio：

aspect-ratio: 16/9 + width: 100% 是首选，无需 JS，响应式天然支持
Safari 15.3 及更早版本不支持 aspect-ratio，需回退：height: 0; padding-bottom: 56.25%; position: relative;，再把设为 position: absolute;
禁用 min-height 或 max-width 替代，它们不参与初始布局计算，无法阻止塌陷

纯 CSS 渐变占位更稳：

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

.img-placeholder {
  background: linear-gradient(#e0e0e0, #f5f5f5);
  background-size: cover;
  background-repeat: no-repeat;
  background-origin: content-box;
}