img标签必须带src和alt属性：src缺失则不加载图片，alt缺失导致可访问性违规及旧版IE显示红叉；路径须准确（推荐绝对路径），width/height宜声明以避免布局偏移，跨域图需服务端支持CORS。
img 标签必须带 src 和 alt 属性
不写 src，浏览器根本不会加载图片；不写 alt，不仅可访问性违规（屏幕阅读器读不出），某些浏览器（比如旧版 IE）还会把缺失 alt 的 img 渲染成一个带红叉的空白框。很多新手只顾填路径，忘了 alt 是强制语义要求，不是“可选说明”。
实操建议：
-
src值必须是有效路径或 URL，相对路径以当前 HTML 文件位置为基准，不是以 CSS 或 JS 文件为准 -
alt内容要简洁描述图意，纯装饰图写alt=""（空字符串，不是省略），不要留空属性或写 “图片” 这类无信息词 - 避免用
javascript:void(0)或#临时占位src，会导致控制台报 404 错误且触发多余网络请求
路径错误是最常见的 404 原因
明明图片文件就在同级目录，却显示红叉——八成是路径写错了。浏览器地址栏里看到的 URL 和 HTML 中写的 src 路径，是两回事。它只认服务器返回 HTML 时那个文件的物理位置。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
-
<img src="images/logo.png" alt="HTML怎么添加图片_HTML插入图片img标签正确写法" >在/pages/index.html里能用，在/blog/post.html里就 404（因为相对路径从/blog/开始找images/） - 本地双击 HTML 打开，
file://协议下路径解析更严格，斜杠方向、大小写、扩展名缺一不可 - 用了中文文件名或空格，没编码（应写成
%E5%9B%BE%E7%89%87.png而非图片.png）
稳妥做法：优先用绝对路径（以 / 开头），例如 <img src="/assets/logo.png" alt="HTML怎么添加图片_HTML插入图片img标签正确写法" >，它始终从站点根目录开始找。
width/height 不写也能显示，但写了更稳
不设 width 和 height 属性，浏览器得先下载图片、解析尺寸，再重排布局——可能造成内容跳动（layout shift），影响 CLS（核心网页指标）。尤其在移动端，这种跳动特别明显。
注意点：
- 直接写
width="300"是 HTML 属性，等价于内联style="width: 300px;"，但不推荐混用像素值和响应式需求 - 如果用 CSS 控制尺寸，记得给
img设max-width: 100%防止溢出容器 - 现代做法：用
width和height属性声明固有尺寸（intrinsic size），再配合aspect-ratio或 CSS 宽高比占位，能提前预留空间
遇到 CORS 或跨域图片加载失败
从其他域名（比如图床、API 返回的图片链接）加载时，控制台报 Cross-Origin Read Blocking (CORB) 或 No 'Access-Control-Allow-Origin' header，说明服务端没开跨域许可。这不是你 img 标签写错了，是对方服务器策略限制。
能做的只有：
- 确认该图片 URL 能直接在浏览器地址栏打开（排除链接失效）
- 检查是否用了
http://加载到https://页面（混合内容被现代浏览器拦截） - 后端代理：把图片请求发给自己服务器，由它去取再吐回前端（绕过浏览器 CORS）
- 避免在
<canvas></canvas>里 draw 这类跨域图，否则会污染 canvas，后续无法读取像素数据
没有万能的 crossorigin 属性能解决所有跨域图问题，它只对支持 CORS 的服务端响应生效，乱加反而可能让本可加载的图变 403。
路径、属性、跨域——这三个地方错一个，图片就出不来。尤其是路径，别信“应该没错”，用浏览器开发者工具的 Network 标签页看真实请求地址，比猜快得多。
