img 标签 src 必须为有效路径，否则图片留白并报错；alt 是可访问性与 SEO 必需属性，须按语义合理设置；width/height 应明确指定以避免布局抖动；base64 仅适用于超小图，大图慎用。
img 标签 src 属性必须是有效路径，否则图片不显示
浏览器遇到 <img> 时只做一件事：按 src 值发起一次 HTTP 请求。如果返回 404、跨域拒绝或路径写错（比如漏了 ./ 或多写了斜杠），图片就留白，控制台报 Failed to load resource。
常见错误现象：
本地双击 HTML 文件打开，图片正常；但用 VS Code Live Server 启动后变空白——大概率是 src 写了绝对路径如 /images/logo.png，而服务器根目录不是你想象的那样。
- 静态资源放在同级
images/文件夹？用相对路径：src="images/logo.png" - HTML 在子目录（如
pages/about.html），图片在根目录assets/？用src="../assets/photo.jpg"或更稳的根对齐写法：src="/assets/photo.jpg"（前提是服务器配置支持） - 用 Webpack/Vite 等构建工具？
src不能直接写原始路径，得走模块导入：src={require('./avatar.png')}（Vue/React）或import avatar from './avatar.png'; <img src={avatar} />
alt 属性不是可选的，它是可访问性和 SEO 的硬性依赖
没写 alt，屏幕阅读器读不出图内容，搜索引擎也少一个理解页面的线索。更实际的是：当网络卡住、图片 404、用户禁用图片时，alt 文本会作为占位显示出来——这是用户唯一能“看到”的信息。
使用场景：
图标按钮（如放大镜）、数据图表、头像、装饰性分割线……每种处理方式不同。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 有信息量的图（产品图、流程图）：
alt="iPhone 15 Pro 侧面金属边框特写"，具体、简洁、不含“图”“照片”等冗余词 - 纯装饰性图（背景花纹、分隔线）：
alt=""（空字符串），告诉辅助技术“忽略它” - 图标按钮（如搜索）：
alt="搜索"，别写alt="放大镜图标"——用户关心功能，不是图形
width/height 不设或乱设会导致页面重排和布局抖动
浏览器解析到 <img> 时，如果没指定 width 和 height，它只能等图片加载完才确定尺寸。这期间文字先流式排版，图片一加载，下方内容突然下移——就是常说的 CLS（Cumulative Layout Shift），影响用户体验和 Lighthouse 评分。
性能影响：
现代做法是用 CSS aspect-ratio 配合 object-fit，但最简兼容方案仍是内联宽高属性。
- 已知原始尺寸？直接写：
<img src="banner.jpg" width="1200" height="400">（注意：这是 HTML 属性，不是 CSS） - 响应式场景（宽度 100%）？用
width和height保比例：<img src="avatar.jpg" width="200" height="200" style="width:100%; height:auto;"> - CSS 中用
aspect-ratio: 4/3更灵活，但 IE 不支持，Safari 15.4+ 才稳定
base64 编码图片慎用，尤其大图会拖慢首屏
把小图标转成 base64 放进 src="data:image/svg+xml;base64,..." 确实省了一次请求，但代价是 HTML 体积暴涨，且无法被浏览器缓存——每次加载都得重新下载整个 HTML。
容易踩的坑：
在线工具生成的 base64 字符串常带换行或空格，直接粘贴进 src 会失效；另外 SVG 转 base64 后，内部的 <use href="#icon"> 引用会断掉。
- 适用场景仅限：超小图（
- 验证方法：复制 base64 字符串到浏览器地址栏，看能否直接打开图片
- 替代方案：用
<picture>+<source>做响应式图片，或现代loading="lazy"控制加载时机
真正麻烦的从来不是怎么插一张图，而是想清楚这张图在什么设备上、以什么尺寸、什么时候、对谁、传递什么信息——其余都是围绕这个判断的技术执行。
