GitHub Pages 图片404主因是路径错误：src需相对于HTML文件位置，推荐用绝对路径如src="/assets/img/logo.png"；注意大小写、缓存延迟、Jekyll忽略规则及HTML/CSS写法规范。
GitHub Pages 里图片路径为什么总 404？
因为 GitHub Pages 默认用 Jekyll 构建，而 Jekyll 会忽略以 _ 开头的文件夹、以及没有 front matter 的纯 HTML 文件——但更常见的原因是路径写错了。img 标签的 src 必须相对于当前 HTML 文件（不是相对于仓库根目录），尤其当你把 HTML 放在子目录（比如 /blog/index.html）时，src="images/photo.jpg" 实际找的是 /blog/images/photo.jpg，不是 /images/photo.jpg。
- 推荐统一把图片放在
assets/img/目录下，然后在所有 HTML 中用绝对路径：src="/assets/img/logo.png"（开头的/表示从站点根开始） - 别用
file://或本地绝对路径，GitHub Pages 不认 - 检查大小写：GitHub 文件系统区分大小写，
Photo.jpg和photo.jpg是两个文件 - 提交后等 1–2 分钟再刷，有时缓存或构建延迟导致临时 404
图片对齐失效？CSS 被 Jekyll 或默认样式覆盖了
GitHub Pages 默认不加任何 CSS，但如果你用了 github.io 子域名 + 自定义域名，或启用了 Jekyll 插件，可能悄悄注入了基础样式。更常见的是：你写的 align="right" 这种 HTML 属性在现代 HTML5 中已废弃，浏览器仍支持但优先级极低，会被后续 CSS 覆盖或忽略。
- 改用 CSS 控制对齐：
- 如果用外部 CSS 文件，确保它被正确引入且路径可访问（同样注意相对/绝对路径问题）
- Jekyll 会处理
.html文件里的{% raw %}{% ... %}{% endraw %}模板语法，但不会动纯 HTML 标签；如果你的 HTML 文件名是index.md，那它走的是 Markdown 渲染流程， - 用浏览器开发者工具（F12）检查元素，看
img标签最终计算出的display、float、margin值是否符合预期
响应式图片在 GitHub Pages 上怎么写才真有效？
单纯加 width="100%" 不等于响应式——它只让图片撑满父容器宽度，但原始尺寸没变，大图小屏照样拖慢加载。GitHub Pages 本身不限制 HTML 写法，关键是你写的代码是否符合现代实践。
- 用
srcset+sizes提供多尺寸源：
- 记得给
img加alt，否则部分屏幕阅读器和 Lighthouse 审计会报错 - 避免在
src里写动态参数（如photo.jpg?ver=2），GitHub Pages 静态托管不处理查询参数，CDN 缓存也可能失效 - 图片文件本身建议压缩：GitHub Pages 不做自动优化，原图越大，首屏越慢
部署后图片显示模糊或拉伸变形？
这不是 GitHub Pages 的锅，而是 HTML/CSS 层面对宽高控制不当。浏览器默认按图片原始尺寸渲染，一旦你只设 width 没设 height，或用 max-width: 100% 却没配 height: auto，就容易失真。
- 安全写法：
- SVG 图片优先用
viewBox，不要硬写width/height属性，否则缩放时可能锯齿 - 如果是背景图，用 CSS
background-size: contain或cover更可控 - 检查是否意外触发了
transform: scale()或父容器设置了overflow: hidden裁剪了边缘
最麻烦的其实是本地预览和 GitHub Pages 行为不一致——因为本地双击打开 HTML 是 file:// 协议，而 GitHub Pages 是 https://，跨域、路径解析、MIME 类型都不同。调试务必用 http-server 或 GitHub Pages 预览链接，别信本地双击效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
