应使用相对路径+分层目录管理图片，禁止绝对路径；推荐assets/images/下按icons/photos/placeholders/logos分类；文件名用短横线、禁空格中文；HTML用figure包裹便于扩展；小图≤50KB才考虑localStorage。
用相对路径 + 目录分层组织，别碰绝对路径
本地图片加载失败，八成是路径写崩了。浏览器通过 file:// 协议打开 HTML 时，根本不会读 C:\Users\... 这类 Windows 绝对路径——直接被安全策略拦死。唯一靠谱的做法，是把图片和 HTML 文件放进同一项目目录树，用相对路径引用。
常见结构建议：
-
index.html和logo.png同级 →<img src="logo.png"> - 图片统一放
assets/images/→<img src="assets/images/avatar.jpg"> - HTML 在
pages/about.html，图在assets/images/→<img src="../assets/images/icon.svg">
注意：./ 前缀纯属冗余，./images/a.jpg 和 images/a.jpg 效果完全一样，还多敲两个字符，容易手误。
按用途建子目录，别堆在根目录下
几十张图全扔 HTML 同级目录，不出三天你就找不到 banner_v2_final_new.jpg 是哪个版本。分类不是为了好看，是为了快速定位、批量操作、避免命名冲突。
立即学习“前端免费学习笔记（深入）”；
推荐分层逻辑：
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
-
assets/images/icons/：小图标（SVG/PNG，≤2KB），可后续转为 icon font 或 sprite -
assets/images/photos/：实拍图、Banner 图，命名带年份或场景，如team-2026-q3.jpg -
assets/images/placeholders/：占位图、空状态图，命名明确用途，如no-data.svg -
assets/images/logos/：品牌相关，区分深色/浅色版，如logo-dark.svg、logo-light.png
所有文件名禁用空格和中文，用短横线（-）分隔单词，大小写敏感，MyPhoto.jpg ≠ myphoto.jpg。
HTML 中用 figure + figcaption 包裹，方便后期加交互
单纯用 <img> 标签堆图，后期想加删除按钮、下载功能、点击放大，就得重写结构。从一开始就把每张图包进 <figure class="gallery-item">，能省掉大量 DOM 重构成本。
关键点：
-
<figure>是语义化容器，天然支持<figcaption>，比<div>更利于 SEO 和屏幕阅读器 - CSS 中设
.gallery-item { display: inline-block; width: 100%; vertical-align: top; }，避免<figcaption>强制换行 - 操作按钮（如删除、下载）用
position: absolute叠在右上角，父级<figure>必须加position: relative - 监听加载失败：
<img onerror="this.src='assets/images/placeholders/broken.svg'">，开发期快速暴露路径问题
小图存 localStorage？只限 ≤50KB 的静态资源
有人想把头像、Logo 存 localStorage 省 HTTP 请求，但实际限制很硬：单图超过 50KB 就可能触发存储上限；隐私模式下 localStorage 默认清空；跨标签页不同步；更新后旧数据不会自动失效。
真要用，只适合这些场景：
- 内联的 SVG 小图标（如 loading spinner），首次 HTML 加载时就写死：
localStorage.setItem('spinner', 'data:image/svg+xml;base64,...') - 用户上传的小头像（
FileReader读取后存完整 data URL，含data:image/png;base64,前缀） - 读取前必须校验：
if (data && data.startsWith('data:image/')) { img.src = data; }
大图、轮播 Banner、内容图一律走文件系统 + 相对路径，别为省一次请求赌上可维护性。
