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="float: left; margin-right: 12px;">
- 垂直居中对齐文字：给
<img>加style="vertical-align: middle;"，比默认的baseline更可控 - 需要精确控制（比如图片+文字水平居中）：用
display: flex包一层，align-items: center简单可靠
为什么图片总被拉伸变形？width/height别乱设固定值
硬写 width="200" height="100" 会强制缩放，破坏宽高比；更糟的是，StackBlitz 预览窗口尺寸小，固定像素值容易溢出或挤占空间。
- 保持比例：只设
width，让浏览器自动算height，例如style="width: 100%; height: auto;" - 响应式限制最大宽度：
style="max-width: 100%; height: auto;"，防止在窄屏上撑破容器 - 避免用
px值写死尺寸，尤其在<div>或<section>里嵌套时，优先用%、em或rem
StackBlitz里图片加载慢或404？看Network面板确认请求地址
StackBlitz 是静态文件服务，不走后端路由，所有资源靠文件系统映射。一旦路径错一个字母、大小写不对（Linux 环境区分大小写），就返回 404 —— 但页面不会报错，只会显示空白或占位符。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 打开浏览器 DevTools → Network 标签页，刷新页面，找红色的
404请求，点开看 “Request URL” 是不是你写的src值 - 常见坑：上传了
IMG_123.jpg，但代码里写了img_123.jpg；或者用了中文名/空格名，没编码也没重命名 - 临时调试：把图片拖进 StackBlitz 编辑器左侧文件树的根目录，确保它出现在
/下，再用最简路径引用
StackBlitz 对图片本身没特殊限制，但路径、CSS 对齐方式、尺寸控制这三块最容易卡住人——尤其是习惯本地双击 HTML 运行的人，会下意识忽略路径必须“部署态有效”这个前提。
立即学习“前端免费学习笔记（深入）”；
