图标应统一放在./assets/icons/等子目录，避免散落导致路径错乱；小图标优先svg（缩放无损、体积小），复杂图标用png并配@2x；必须设alt属性防加载失败空白。
图标资源该放哪：路径结构别踩“相对路径陷阱”
图标文件放在 ./assets/icons/ 或 ./images/ 这类统一子目录下，比散落在各 HTML 文件同级目录里更可控。常见错误是写成 src="icon-home.png"（默认找当前 HTML 所在目录），结果页面一挪位置就 404；换成 src="./assets/icons/icon-home.png" 就稳定得多。
如果用 CSS 背景图，路径必须相对于 CSS 文件位置计算，不是 HTML 页面——这点容易被忽略。比如 CSS 在 /css/style.css，图标在 /assets/icons/，就得写 background-image: url('../assets/icons/icon-home.png');，而不是 url('./assets/icons/...')。
怎么选格式：SVG vs PNG 的实际取舍点
小图标（20×20px 以内）优先用 .svg：缩放不糊、体积小、可直接内联或 CSS 填充颜色；但注意 IE11 不支持 SVG 作为 background-image，若需兼容得降级为 PNG。
PNG 适合带透明渐变、阴影或复杂细节的图标，但得配多倍图（@2x）应对高清屏；单个 icon-home@2x.png 比两个独立文件更易维护，只要 CSS 里用 background-size: contain 控制显示区域即可。
- 内嵌
<img>时，SVG 可加width/height属性控制尺寸，PNG 必须设，否则布局抖动 - CSS 伪元素中用 SVG，记得加
background-repeat: no-repeat，否则可能平铺 - 不要把 SVG 写成
<img src="data:image/svg+xml,...">长 Base64——难调试、无法缓存、HTTP 响应头失效
怎么避免图标加载失败时空白一片
<img> 标签必须带 alt 属性，哪怕只是空字符串 alt=""，否则屏幕阅读器会读出文件名，图片挂掉时也至少留出占位空间；CSS 背景图没 fallback 机制，所以关键导航图标（如首页、搜索）建议用 <img> + alt，装饰性图标才用伪元素。
如果坚持用 CSS 方案，可加一层文字兜底：给 a 设 position: relative，再让伪元素绝对定位覆盖左上角，文字本身保持可读、可选、SEO 友好。
- 别依赖
onerror事件自动替换图片——它不触发 CSS 背景图，且现代浏览器对内联 SVG 的 error 处理不稳定 - 本地开发时用浏览器 Network 面板过滤
img和media类型，一眼看出哪些图标 404 - 构建工具（如 Vite/Webpack）能自动哈希图标文件名并更新引用，但需确认插件已启用
asset处理逻辑
图标命名和版本怎么管才不乱
用语义化命名，比如 nav-home.svg、nav-search-active.svg，别用 icon1.png 或 button_02@2x.png。hover 状态图标配 -hover 后缀，禁用 _over、active 等不一致写法。
图标更新时，别直接覆盖原文件——改名再上线，比如从 nav-contact.svg 升级为 nav-contact-v2.svg，等全站引用切换完成再删旧版。否则缓存未过期时，部分用户看到新 HTML + 旧图标，视觉错位。
- 同一套图标建议提取为独立 NPM 包或 Git 子模块，前端项目通过
import引入，避免复制粘贴导致版本分裂 - 设计稿交付时要求提供 SVG 源文件 + 导出规范（viewBox、无嵌入字体、路径扁平化），否则开发时还得手动优化
- CI 流程中加一步检查：扫描所有
src和url()中的图标路径，比对是否存在对应文件，缺失即报错
alt 的 <img> 或一个漏掉 ../ 的 CSS 路径，就能让整条导航链在某个环境里静默失效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
