454 字
1 分钟
Astro 静态站图片 404 排查：从引用路径到浏览器回归的完整流程
静态站图片 404 的难点，往往不在图片本身，而在“代码写的路径”和“浏览器最终请求的路径”不是同一个概念。尤其是筛选卡片、懒加载列表和动态数据，首页看起来正常并不代表其他分类没有缺图。
1. 先确认资源应该放在哪里
需要用固定 URL 访问的文件放在 public/ 下。例如 public/images/device/phone.webp 会以 /images/device/phone.webp 提供。不要在数据文件中写入本机绝对路径，也不要把 public 重复写进 URL。
image: "/images/device/phone.webp" // 正确image: "/public/images/device/phone.webp" // 会请求错误地址2. 按用户真实操作验证
不要只检查默认分类。打开本地页面后，依次点击每个筛选项，并在网络面板检查图片是否返回 200。对动态卡片，最好同时检查 img.complete 和 img.naturalWidth；前者为真但宽度为 0，通常仍表示图片加载失败。
3. 用可维护的兜底收口
外部图片可能失效或拒绝跨站引用。卡片组件应提供本地默认图，并在图片加载失败时替换它，同时显示“暂无封面”。这不会掩盖资源问题，但能避免读者看到破损图标，并为后续补图保留稳定的界面。
4. 发布前清单
- 执行类型检查，确保数据字段未写错。
- 本地打开每个会切换内容的分类。
- 检查浏览器控制台与网络面板中的图片请求。
- 用无痕窗口复测，避免缓存掩盖缺图。
把“每个分类都测过”写进发布记录，能让下一次增加设备或封面时有明确的回归标准。
分享
如果这篇文章对你有帮助，欢迎分享给更多人！
Astro 静态站图片 404 排查：从引用路径到浏览器回归的完整流程
https://levifree.dpdns.org/posts/astro-static-assets-404-debugging/ 部分信息可能已经过时
相关文章 智能推荐
1
Astro 本地预览验收清单：发布前用 15 分钟发现导航、资源与交互问题
Astro 一份适用于静态博客的小型回归流程，覆盖构建诊断、关键入口、动态筛选和资源加载
2
个人博客到底值不值得建：从写第一篇文章到稳定发布的实际判断
个人成长 不把独立博客神化：用内容所有权、维护成本、发布流程与读者价值判断是否适合开始
3
Docker Compose 网络与 DNS 故障排查：容器互通失败怎么查
Docker 从服务名解析、端口映射到网络隔离，系统定位 `connection refused` 与 `name not resolved`
4
Git 冲突处理实战手册：从定位到收敛的一套标准流程
Git 告别手忙脚乱：处理 merge/rebase 冲突时的步骤、命令与风险控制
5
Cloudflare Pages 性能与安全配置：先验证默认行为，再做最小改动
Cloudflare 从 Pages 默认缓存、静态响应头到上线后的验证，避免为了优化而制造陈旧内容或安全回归