图像不显示主因是src路径错误，需确认相对/绝对路径、大小写及正斜杠；alt属性必填且语义准确；响应式用srcset/sizes或picture；svg/base64仅适用小图标。
用 <img alt="html怎样在文档中嵌入图像_HTML文档中嵌入图像方法【方法】" > 标签嵌入图像，src 属性必须写对路径
图像不显示，八成是 src 指向了错误位置。浏览器不会报错，只留一个空框或替代文字。src 值不是“文件名”，而是相对或绝对路径——它从 HTML 文件所在位置出发找图。
- 本地开发时，
src="logo.png"表示和 HTML 在同一目录；src="images/logo.png"表示在子目录images/下 - 路径区分大小写（尤其部署到 linux 服务器后），
Logo.png和logo.png是两个文件 - 避免用 windows 风格的反斜杠：
src="imageslogo.png"❌，统一用正斜杠/ - 如果图在上层目录，用
../：HTML 在pages/index.html，图在assets/logo.png，则写src="../assets/logo.png"
alt 不是可选项，是图像语义和可访问性的关键
没写 alt，屏幕阅读器无法描述图像，seo 也少一环；写成空字符串 alt="" 是有意省略（如纯装饰图），但不能直接删掉属性。
- 功能性图像（如按钮图标、图表）要准确描述作用：
alt="搜索按钮"，而不是alt="放大镜" - 纯装饰图用
alt=""，别写alt=" decorative "或alt="spacer" - 某些 CMS 或静态站生成器会自动补
alt，但值常为文件名，需手动检查修正
响应式图像要用 srcset 和 sizes，不是只靠 CSS
CSS 的 max-width: 100% 只控制显示尺寸，不改变下载体积。用户用手机加载 4K 图，浪费带宽又拖慢首屏。
- 基础响应：
<img src="photo-small.jpg" srcset="photo-small.jpg 480w, photo-large.jpg 1024w" sizes="(max-width: 480px) 100vw, 50vw" alt="HTML怎样在文档中嵌入图像_HTML文档中嵌入图像方法【方法】" > -
srcset提供多个分辨率源，sizes告诉浏览器“在什么条件下该用多宽的容器” - 现代项目可优先用
<picture></picture>+<source media></source>处理艺术方向切换（比如横屏用宽图、竖屏用裁剪版） - 工具链（如 Vite、webpack）能自动产出
srcset，但需确认插件是否启用及配置是否覆盖所有输出尺寸
SVG 和 Base64 图像的嵌入方式与风险
内联 SVG 或 Base64 能减少 http 请求，但不是万能解法——它们让 HTML 体积暴涨，且无法被浏览器缓存。
立即学习“前端免费学习笔记（深入）”；
- 小图标（如 logo、按钮）适合内联 SVG：
<svg><path d="..."></path></svg>，可直接用 CSS 控制颜色和尺寸 - Base64 编码图片（
src="data:image/svg+xml;base64,PHN2Zy..."）仅建议用于极小图（ - 内联 SVG 里如果有
<image href="..."></image>，路径仍是相对 HTML 的，不是相对 SVG 文件——这点容易忽略 - 服务端渲染（SSR）中动态插入 Base64，要注意转义，避免
"或破坏 HTML 结构
图像路径、alt 含义、响应式逻辑、内联时机——这四点任一出偏差，都会导致图像在某个环境或设备上“消失”或“失效”。调试时别只看控制台有没有报错，先打开网络面板，看图片请求发没发出、返回的是 200 还是 404。