广告图片路径应统一用站点根目录绝对路径（如/static/ads/）集中管理，通过js对象或css变量抽离配置，避免硬编码；配合aspect-ratio、webp格式、onerror上报及按需loading策略保障加载与体验。
广告图片路径怎么统一管理才不容易出错
直接在每个 <img> 标签里写死相对路径（比如 src="ads/2026-q3-banner.jpg"），开发后期改目录或换 CDN 就得全局搜索替换，极易漏改、路径 404 却不报错。核心是把路径“抽离”成可配置的源头。
- 用 CSS 自定义属性统一声明广告资源基址：
:root { --ad-base: "/static/ads/"; }，然后在 HTML 中配合style属性或 JS 动态注入：<img src="var(--ad-base)summer-sale.png">（注意：纯 HTML 不支持该语法，需搭配 JS 或构建工具） - 更实际的做法：所有广告位用 JS 初始化，从一个对象集中读取路径：
const AD_ASSETS = { banner_top: "/static/ads/top-728x90-v2.webp", sidebar_1: "/static/ads/side-300x250-202609.webp", mobile_sticky: "/static/ads/sticky-320x50.webp" };再通过document.querySelector(".ad-banner-top").src = AD_ASSETS.banner_top注入 - 禁止混用路径写法：不要有的地方写
./ads/，有的写ads/，全部统一从站点根目录起始（即以/开头），避免因 HTML 文件位置不同导致加载失败
为什么广告图不能只靠 width/height 控制尺寸
硬编码 width="728" height="90" 看似简单，但一上移动设备就拉伸变形、布局错位，且无法响应视口变化。浏览器会强制按比例缩放图片，而原始像素比（如 728×90 vs 375×50）并不匹配。
- 必须用 CSS 控制容器尺寸 + 图片自适应：
.ad-banner { width: 100%; max-width: 728px; height: auto; }+.ad-banner img { width: 100%; height: auto; display: block; } - 对固定宽高比广告（如 728×90），优先用
aspect-ratio: 728/90（现代浏览器支持），降级方案用 padding-bottom 百分比占位 - WebP 格式优先：同质量下体积比 JPG 小 25%~35%，广告图多为静图，转换无损；若需兼容老 IE，可保留 JPG 备份并用
<picture></picture>切换
onerror 监听广告图失败时该做什么
广告图挂了，用户看到空白或 alt 文字，运营却完全不知情——这是最危险的静默故障。单纯换 placeholder 图不够，得留痕、可定位、能统计。
- 基础降级：
<img src="..." onerror="this.src='/static/ads/placeholder-728x90.webp'; this.classList.add('ad-failed');"> - 加日志上报（轻量）：
onerror="console.warn('Ad load failed:', this.src); fetch('/log/ad-error', {method:'POST', body: JSON.stringify({src:this.src})});" - 开发期快速排查：在控制台运行
Array.from(document.querySelectorAll('.ad-banner img')).filter(i => i.naturalWidth === 0)，直接列出所有未加载成功的广告图 DOM 节点
广告图要不要加 loading="lazy"？
要，但必须分情况。首屏广告（如顶部横幅）绝不能 lazy，否则用户打开页面第一眼看不到广告，影响曝光和结算；非首屏或滚动后才出现的广告（如文章末尾、侧边栏底部）适合开启。
- 首屏广告：显式设
loading="eager"，确保立即加载 - 非首屏广告：用
loading="lazy"，但需确认父容器有明确高度（避免懒加载占位塌陷），或搭配 IntersectionObserver 手动触发加载 - 注意 Safari 旧版本（loading 属性，如需兼容，用 JS 模拟懒加载逻辑更稳妥
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
