图片路径错误导致img标签不显示，因浏览器静默失败；相对路径以HTML文件所在目录为起点，根路径需加/但file://协议下会失效；alt属性必填且需语义化；width/height仅控制显示尺寸，不减少加载体积。
图片路径写错，![]()
浏览器遇到无效的 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 看似不敏感但部署到服务器后可能出问题，统一小写更稳妥
![]()
alt 不是可选装饰，而是关键属性
没写 alt 不影响显示，但会让屏幕阅读器用户完全不知道这是什么图，搜索引擎也无法理解图片内容，而且某些网络环境或样式禁用图片时，alt 文本就是唯一可见信息。
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
-
alt值要简洁描述图像本质，不是“图片”“图标”这种废话，比如alt="微信支付二维码" - 纯装饰性图片（比如分割线、背景花边），应设为空字符串：
alt=""，而不是删掉alt属性 - 如果图片是链接的一部分，
alt应说明点击后行为，例如alt="返回首页"
图片太大拖慢页面，width/height 属性不能替代压缩
只写 width="200" 和 height="150" 只是缩放显示尺寸，浏览器仍要下载原始大图，内存和流量照吃不误。
- 真正优化得靠「源文件压缩」：用工具（如 Squoosh、ImageOptim）把 PNG/JPG 文件体积压下来
-
width/height属性仍有价值——能防止布局偏移（CLS），建议保留并填真实像素值 - 响应式场景优先用
srcset+sizes，而不是只靠 CSS 缩放：
图片路径和协议、上下文强绑定，没有“通用写法”，每次换目录结构都得重新核对 src 是从哪算起。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
