Penpot导出HTML中图片路径错乱、宽高失真、class混乱及不响应式等问题，源于插件对资源处理逻辑差异、未继承设计态样式、缺乏语义化命名与响应式适配，需手动配置路径、约束缩放、启用图层名映射并补充CSS规则。
Penpot 导出的 HTML 里 <img> 标签 src 路径错乱
penpot 本身不生成可直接运行的 html，所谓“导出 html”其实是通过第三方插件（比如 penpot-export-html 或社区版 penpot-layout-exporter）把画布元素转成静态代码。这些插件默认把图片存为 base64 内联，或按相对路径写进 src，但不会自动创建对应文件夹、也不会校验路径是否存在。
常见错误现象：<img src="assets/images/icon-home.png"> 在浏览器里 404；或者所有图变成 base64 长字符串，HTML 文件体积暴涨、无法缓存。
- 确认你用的是哪个插件——不同插件对资源路径的处理逻辑完全不同，
penpot-export-html默认走 base64，penpot-layout-exporter可配exportAssets: true才生成assets/目录 - 导出前，在 Penpot 里右键图片 → “替换图像”，确保所有图都来自本地上传（而非 URL 链接），否则插件可能跳过或报
Cannot resolve external image - 如果需要相对路径，必须手动在插件配置中启用资产导出，并指定
assetsDir，例如设为"./assets"；否则它可能写成../assets/xxx.png，而你的 HTML 根目录没对齐
导出后 <img> 宽高失真、比例错乱
Penpot 画布里的图片是作为“图形元素”渲染的，有缩放、裁剪、蒙版等视觉效果，但插件转 HTML 时只读取原始尺寸和位置，不继承 CSS transform 或 object-fit 行为。
典型表现：明明设计稿里是圆角头像，导出后变成拉伸矩形；或者图标在 Penpot 中被手动缩放到 24×24，但 HTML 里 <img> 还是原始 128×128，靠父容器 width: 24px 强制压缩，导致模糊。
- 插件一般只输出
width和height属性，不加style="object-fit: cover"—— 如果你需要保持宽高比，得手动补上或用 CSS 类统一控制 - 避免在 Penpot 里用“自由变形”拉扯图片，改用“约束比例缩放”（按住 Shift 拖角），这样插件读到的
width/height才真实反映目标尺寸 - 导出后检查
<img>的src是否指向正确分辨率图——有些插件会把 @2x 图当普通图导出，结果在非 Retina 屏上过大
使用 penpot-layout-exporter 时 class 名混乱、无法对齐现有 CSS
这个插件默认给每个图层生成唯一 class，比如 layer-5f3a9b2c-img，而不是语义化名称。它不读取你在 Penpot 里写的图层名（除非你手动开启命名映射），也不支持 BEM 或 Tailwind 类名约定。
立即学习“前端免费学习笔记（深入）”；
结果就是：导出的 HTML 无法直接套用你已有的 .card__image 或 tw-w-16 tw-h-16 样式，每次都要手动改 class 或重写 CSS。
- 导出前，在 Penpot 中双击图层名，改成有意义的名字，如
header-logo、user-avatar；再在插件配置里打开useLayerNamesAsClass: true - 禁用插件的自动 ID 注入（
generateIds: false），否则会同时存在id="img-1"和class="header-logo"，造成样式优先级干扰 - 如果项目用 Tailwind，别指望插件直接输出 utility class——它只输出结构，你得用 PostCSS 插件或脚本二次处理，比如把
class="icon-search"替换为class="w-5 h-5 text-gray-500"
导出的 HTML 图片不响应式、移动端塌陷
Penpot 是固定画布工具，没有视口概念。插件生成的 <img> 默认带固定 width/height，没加 max-width: 100% 或 height: auto，一到小屏幕就横向溢出。
这不是插件 bug，而是设计工具和前端逻辑的根本差异：Penpot 输出的是“快照”，不是“响应式组件”。
- 导出后必须在全局 CSS 里加一条兜底规则：
img { max-width: 100%; height: auto; }，否则单个改太累 - 如果图片用于背景，插件几乎从不输出
background-image，而是坚持用<img>—— 这时候就得手动重构，换成<div style="background-image: url(...)">并补上background-size: cover - SVG 图片会被转成
<img src="xxx.svg">，但若原 SVG 有内联<style>或<defs>，部分插件会丢掉——建议导出前先用 SVGO 压缩并内联样式
真正难的不是导出动作本身，而是得清楚每张图在最终页面里承担什么角色：是内容图？装饰图？图标？这决定了它该用 <img>、<picture> 还是 CSS background。Penpot 插件不管这个，它只管“画布上看起来什么样”。
