StackBlitz图片不显示主因是路径错误，须确保图片为项目文件且src相对index.html正确；align属性已废弃，应改用float、vertical-align或flex布局；避免固定宽高导致变形，推荐width+height:auto；加载异常时查Network面板确认404。

图片在StackBlitz里不显示？先检查src路径是不是相对路径写错了

stackblitz 默认不支持直接读取本地文件系统，所有图片必须作为项目文件存在，且 src 路径要相对于 index.html 所在位置。常见错误是把图片放进了 /src 或 /assets 文件夹但没在 html 里写对路径。

• 正确做法：把图片（比如 logo.png）和 index.html 放在同一级目录，然后用 <img src="logo.png">
• 如果放在 /assets/logo.png，路径必须写成 src="assets/logo.png"，不能写 src="./assets/logo.png" 或 src="/assets/logo.png"（后者会被解析为根路径，StackBlitz 不认）
• 上传后右键图片 → “Copy relative path”，粘贴进 src 属性最保险

align属性失效？别用它，改用vertical-align或flex

HTML 的 align 属性（如 <img align="right">）早已被废弃，在 StackBlitz（以及所有现代浏览器）中基本无效，还可能触发怪异换行或布局塌陷。

• 文字环绕图片：用 float: left 或 float: right 配合 margin，例如：

  @@##@@

• 垂直居中对齐文字：给 <img src="a.png" style="max-width:90%"> 加 style="vertical-align: middle;"，比默认的 baseline 更可控
• 需要精确控制（比如图片+文字水平居中）：用 display: flex 包一层，align-items: center 简单可靠

为什么图片总被拉伸变形？width/height别乱设固定值

硬写 width="200" height="100" 会强制缩放，破坏宽高比；更糟的是，StackBlitz 预览窗口尺寸小，固定像素值容易溢出或挤占空间。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 保持比例：只设 width，让浏览器自动算 height，例如 style="width: 100%; height: auto;"
• 响应式限制最大宽度：style="max-width: 100%; height: auto;"，防止在窄屏上撑破容器
• 避免用 px 值写死尺寸，尤其在 <div> 或 <code><section></section> 里嵌套时，优先用 %、em 或 rem

  StackBlitz里图片加载慢或404？看Network面板确认请求地址

  StackBlitz 是静态文件服务，不走后端路由，所有资源靠文件系统映射。一旦路径错一个字母、大小写不对（Linux 环境区分大小写），就返回 404 —— 但页面不会报错，只会显示空白或占位符。

  • 打开浏览器 DevTools → Network 标签页，刷新页面，找红色的 404 请求，点开看 “Request URL” 是不是你写的 src 值
  • 常见坑：上传了 IMG_123.jpg，但代码里写了 img_123.jpg；或者用了中文名/空格名，没编码也没重命名
  • 临时调试：把图片拖进 StackBlitz 编辑器左侧文件树的根目录，确保它出现在 / 下，再用最简路径引用

  StackBlitz 对图片本身没特殊限制，但路径、CSS 对齐方式、尺寸控制这三块最容易卡住人——尤其是习惯本地双击 HTML 运行的人，会下意识忽略路径必须“部署态有效”这个前提。