HTML中如何插入图片_HTML插入图片路径写法【图片嵌入】

图片路径错误导致img标签不显示，因浏览器静默失败；相对路径以html文件所在目录为起点，根路径需加/但file://协议下会失效；alt属性必填且需语义化；width/height仅控制显示尺寸，不减少加载体积。

图片路径写错，<img alt="HTML中如何插入图片_HTML插入图片路径写法【图片嵌入】" > 标签就完全不显示

浏览器遇到无效的 src 路径时，不会报错，只会静默失败——连“图片加载失败”的小图标都不一定出现。最常见的是相对路径没对准当前 HTML 文件的位置。

• 用相对路径时，src 的起点是「HTML 文件所在目录」，不是项目根目录，也不是 CSS/js 文件所在目录
• src="images/logo.png" 表示同级目录下有个 images 文件夹；如果 HTML 在 /pages/index.html，那实际找的是 /pages/images/logo.png
• 想从项目根目录开始写，必须加斜杠：src="/images/logo.png"（注意开头的 /）
• 路径里别混用反斜杠 ，windows 习惯要改掉，一律用正斜杠 /

本地双击打开 HTML，file:// 协议下路径更敏感

直接双击 HTML 文件运行时，浏览器走的是 file:// 协议，此时带 / 的绝对路径（如 /images/logo.png）会去访问磁盘根目录，基本必挂。

• 开发阶段建议用本地服务器（比如 python3 -m http.server 或 VS Code Live Server 插件），避免 file:// 陷阱
• 真要双击测试，路径只能用纯相对路径：src="logo.png"、src="assets/icon.svg"，不能以 / 开头
• 路径大小写在 macos/linux 上敏感，Windows 看似不敏感但部署到服务器后可能出问题，统一小写更稳妥

<img alt="HTML中如何插入图片_HTML插入图片路径写法【图片嵌入】" > 的 alt 不是可选装饰，而是关键属性

没写 alt 不影响显示，但会让屏幕阅读器用户完全不知道这是什么图，搜索引擎也无法理解图片内容，而且某些网络环境或样式禁用图片时，alt 文本就是唯一可见信息。

• alt 值要简洁描述图像本质，不是“图片”“图标”这种废话，比如 alt="微信支付二维码"
• 纯装饰性图片（比如分割线、背景花边），应设为空字符串：alt=""，而不是删掉 alt 属性
• 如果图片是链接的一部分，alt 应说明点击后行为，例如 alt="返回首页"

图片太大拖慢页面，width/height 属性不能替代压缩

只写 width="200" 和 height="150" 只是缩放显示尺寸，浏览器仍要下载原始大图，内存和流量照吃不误。

立即学习“前端免费学习笔记（深入）”；

• 真正优化得靠「源文件压缩」：用工具（如 Squoosh、ImageOptim）把 PNG/JPG 文件体积压下来
• width/height 属性仍有价值——能防止布局偏移（CLS），建议保留并填真实像素值
• 响应式场景优先用 srcset + sizes，而不是只靠 CSS 缩放：<img src="small.jpg" srcset="large.jpg 1024w, medium.jpg 768w" sizes="(min-width: 768px) 768px, 100vw" alt="HTML中如何插入图片_HTML插入图片路径写法【图片嵌入】" >

图片路径和协议、上下文强绑定，没有“通用写法”，每次换目录结构都得重新核对 src 是从哪算起。