img标签怎么用？HTML图片插入教程

本文深入解析HTML中img标签的正确用法，直击开发者高频踩坑点：src路径错误导致图片彻底消失、alt缺失引发可访问性违规与SEO损失、未设宽高引发布局抖动（CLS）、仅靠CSS实现响应式造成流量浪费等；强调src和alt为强制属性，详解路径书写规范、alt语义化编写原则、内联宽高与aspect-ratio的兼容性取舍、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%）不能阻止重排。

• 最稳方案：内联写 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 大图，白耗流量。

• 基础响应式：
• 更彻底方案：用 包裹，配合 提供格式降级
• 懒加载加一行：loading="lazy"，但注意它对首屏关键图可能延后加载

真正容易被忽略的点是：所有这些属性（src、alt、width、height、loading）都得写在同一个 标签里，拆到 JS 动态注入或 Vue 模板里时，稍不注意就会漏掉 alt 或写错路径拼接逻辑。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。