HTML添加图片正确写法：img标签使用教程

本文深入解析了HTML中img标签的正确使用方法，强调src和alt属性不可或缺——src缺失导致图片无法加载，alt缺失则损害可访问性并可能在旧版浏览器中显示红叉；同时指出路径准确性（推荐使用绝对路径）、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 时那个文件的物理位置。

常见错误现象：

• 在 /pages/index.html 里能用，在 /blog/post.html 里就 404（因为相对路径从 /blog/ 开始找 images/）
• 本地双击 HTML 打开，file:// 协议下路径解析更严格，斜杠方向、大小写、扩展名缺一不可
• 用了中文文件名或空格，没编码（应写成 %E5%9B%BE%E7%89%87.png 而非 图片.png）

稳妥做法：优先用绝对路径（以 / 开头），例如 ，它始终从站点根目录开始找。

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）
• 避免在 里 draw 这类跨域图，否则会污染 canvas，后续无法读取像素数据

没有万能的 crossorigin 属性能解决所有跨域图问题，它只对支持 CORS 的服务端响应生效，乱加反而可能让本可加载的图变 403。

路径、属性、跨域——这三个地方错一个，图片就出不来。尤其是路径，别信“应该没错”，用浏览器开发者工具的 Network 标签页看真实请求地址，比猜快得多。

终于介绍完啦！小伙伴们，这篇关于《HTML添加图片正确写法：img标签使用教程》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！