img标签必须同时包含src和alt属性，src错误导致图片消失，alt缺失违反可访问性规范；路径需精确匹配，alt须具语义性；建议内联width/height防抖动，响应式用srcset+sizes或picture，懒加载加loading="lazy"。
img 标签必须带 src 和 alt，缺一不可——不写 alt 是可访问性违规，src 错误则图片直接消失，连占位符都不留。
src 路径写错是 90% 的“图片不显示”原因
浏览器不会猜路径，它只按字面解析 src 值。常见错误包括：
-
src="logo.png"—— HTML 文件在/pages/index.html，但图片实际在/assets/logo.png，该写成src="../assets/logo.png" -
src="/assets/logo.png"—— 开发时本地服务器根目录 ≠ 上线后 Nginx 配置的 root，上线后极易 404 -
src="example.com/img.jpg"—— 漏了协议，必须是src="https://example.com/img.jpg"或src="//example.com/img.jpg" - 本地双击 HTML 打开时用
file://协议，远程图片会被跨域或混合内容策略拦截
alt 不是“可填可不填”，而是语义刚需
alt 决定屏幕阅读器怎么读、SEO 怎么理解、图片加载失败时显示什么。不是装饰就别写空字符串。
- 有信息量的图（如产品截图、数据图表）：写具体描述，例如
alt="React 18 并发渲染流程图" - 纯装饰图（如背景分割线、icon）：明确写
alt=""，告诉辅助技术跳过 - 千万别写
alt="图片"、alt="logo"或堆砌关键词，等于放弃语义
width/height 不设会引发布局抖动
现代浏览器支持 aspect-ratio，但老版本 Safari 和 IE 不认。只靠 CSS 缩放（比如 max-width: 100%）不能阻止重排。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 最稳方案：内联写
width和height，单位用像素，值取原图尺寸（如width="600" height="400"） - 想响应式又保 CLS：用
style="aspect-ratio: 3 / 2; width: 100%; height: auto;"，但得接受旧浏览器 fallback 为无宽高 - 只设
width且不设height，浏览器会等比推算高度——前提是原图没被 CSS 强行拉伸变形
响应式图片别只靠 CSS，得用 srcset + sizes
用 style="width: 50%" 缩小一张 4000×3000 的 JPG，手机照样下 8MB 大图，白耗流量。
立即学习“前端免费学习笔记（深入）”；
- 基础响应式：
<img src="small.jpg" srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1200w" sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw" alt="HTML中的img标签怎么使用？" > - 更彻底方案：用
<picture></picture>包裹，配合<source type="image/webp"></source>提供格式降级 - 懒加载加一行：
loading="lazy"，但注意它对首屏关键图可能延后加载
src、alt、width、height、loading）都得写在同一个 <img alt="HTML中的img标签怎么使用？" > 标签里，拆到 JS 动态注入或 Vue 模板里时，稍不注意就会漏掉 alt 或写错路径拼接逻辑。 
