Notion 不渲染 HTML <img> 标签，仅支持上传文件、公开 URL 或第三方服务图片；应使用原生图片块居中或表格块实现多图布局，复杂需求可借助外部网页嵌入。
Notion 不支持直接渲染 HTML <img> 标签
Notion 的页面编辑器会自动过滤掉所有 HTML 标签，<img src="..."> 粘贴进去只会显示为纯文本，甚至可能被清空。这不是样式问题，是根本没执行——浏览器没机会解析它。
常见错误现象：
• 把带 <img> 的 HTML 片段粘进 Notion 页面，图片不显示
• 用 /embed 插入 iframe，但里面写 <img>，依然不渲染（iframe 沙箱限制 + Notion 对内联 HTML 的拦截）
• 试图用 CSS text-align 或 float 控制对齐，结果连标签都消失了
- 唯一能被 Notion 原生识别的图片来源是：上传到 Notion 的文件、外部图片 URL（通过 /image 或拖拽）、或嵌入支持的第三方服务（如 Imgur、Cloudinary 的公开直链）
- 如果图存在本地或私有服务器上，必须先托管为可公开访问的 URL，再以「图片块」形式插入
- Notion 不解析 HTML，所以任何依赖
<div>+style+<img>的对齐方案，在 Notion 里等于没写
用 Notion 原生图片块 + 水平居中替代 text-align: center
Notion 图片块默认左对齐，但支持手动居中：选中图片块 → 右侧属性栏点「对齐方式」→ 选「居中」。这个操作生成的是 Notion 内部布局指令，不是 CSS，所以稳定可靠。
使用场景：
• 博客封面图、示意图、流程图截图等需要视觉居中的静态图
• 避免因换行/宽度变化导致图片“跑偏”
立即学习“前端免费学习笔记（深入）”；
- 注意：居中仅作用于当前图片块，不影响前后文字或其它块的排版
- 如果图宽超过页面最大宽度（约 800px），Notion 会自动缩放并保持比例，此时居中仍有效
- 不要用空格或全角空格“模拟”居中——移动端会错位，协作时容易被误删
需要多图并排或复杂布局？用表格块兜底
Notion 没有 flex/grid，但表格块能硬控列宽和对齐。比如要左右两张图，中间留白，就建一个 1 行 3 列的表格，左右两列放图片块，中间列留空或设固定宽度（如 20px）。
参数差异：
• 表格列宽可拖动，也可右键列标题 →「设置列宽」→ 输入像素值（如 300px）
• 每个单元格内图片块仍可单独设置对齐方式（左/中/右）
- 避免用多个图片块连续排列指望它们自动对齐——不同屏幕下换行不可控
- 表格边框可以关闭（右键表格 →「隐藏边框」），视觉上就是干净的并排图
- 性能无影响，但别嵌套太深：表格里再插表格，移动端编辑体验会明显变卡
动态图或需响应式对齐？走 Notion API + 外部页面中转
如果你真需要 HTML/CSS 级控制（比如 object-fit、aspect-ratio、hover 效果），Notion 原生做不到。可行路径是：把图和样式写在外部网页（如 Vercel 部署的静态页），然后用 Notion 的 /embed 插入该网页 URL。
关键限制：
• 外部网页必须支持 X-Frame-Options: ALLOW-FROM 或 Content-Security-Policy: frame-ancestors，否则 Notion iframe 会拒绝加载
• Notion 嵌入高度固定（默认 400px），需在外部页面用 window.parent.postMessage 主动通知高度
- 简单场景别走这条路：部署成本、跨域调试、移动端 iframe 缩放 bug 都会吃掉你半天时间
- 优先检查是否真的需要动态行为——90% 的“对齐需求”，用图片块居中 + 表格分栏已覆盖
- 最容易被忽略的一点：Notion 嵌入的 iframe 在 iOS Safari 下默认禁用滚动，如果外部页内容超长，用户可能以为内容丢失
