Cloudflare Pages 中 img 的 align 属性失效因属 HTML4 废弃属性，应改用 CSS（如 float 或 class）；图片 404 多因路径未按构建输出结构放置；缓存问题需加版本参数或哈希重命名并确保 HTML 重新部署。
Cloudflare Pages 里 img 标签的 align 属性失效了
因为 align 是 HTML4 的废弃属性，Cloudflare Pages 默认用现代 HTML5 渲染（且可能经由 Hugo/Jekyll 等静态生成器处理），浏览器直接忽略它。你看到图片没对齐，不是部署问题，是写法过时了。
实操建议：
- 改用 CSS 控制对齐：
class="img-right"配合 CSS 文件里的.img-right { float: right; margin-left: 1rem; } - 如果用 Markdown 写内容（比如
README.md或博客正文），align在原始 Markdown 中本就不合法；需用 HTML 片段或自定义容器（如 - 检查构建日志里有没有警告：比如 Hugo 提示
deprecated align attribute in—— 这类提示容易被忽略，但它是线索
Cloudflare Pages 构建时图片路径 404
本地预览正常，上线后 
实操建议：
- 确认图片是否真的在 Git 仓库里：运行
git ls-tree -r HEAD --name-only | grep images/，没结果就说明没提交 - 静态站点生成器（如 Hugo、Next.js）默认把资源放
static/或public/下；确保图片放在对应目录，而不是src/或content/里 - 检查
build output directory设置：Cloudflare Pages 后台配置中，如果填了dist，但你的构建实际输出到out，图片就会丢失 - URL 区分大小写：本地系统不敏感，Linux 构建环境敏感 ——
Logo.png和logo.png是两个文件
用 cloudflare-pages CLI 部署前怎么验证图片能加载
CLI 本身不启动本地服务，所以不能靠 npm run preview 判断线上效果。必须模拟 Pages 的 serving 行为。
实操建议：
- 先运行真实构建命令：比如 Hugo 用户执行
hugo --destination ../dist，然后用 Python 快速起一个静态服务器：cd ../dist && python3 -m http.server 8000，再访问http://localhost:8000看图 - 检查浏览器开发者工具的 Network 面板：过滤
img，看请求 URL 是否和你预期一致（比如是不是多了一层/blog/前缀） - 如果你用了
baseURL（Hugo）或assetPrefix（Next.js），确保它和 Pages 的Production branch设置匹配；Pages 默认把主分支部署到根路径，不是/main
Cloudflare Pages 缓存导致旧图片一直显示
你替换了 avatar.jpg 并重新部署成功，但用户浏览器还是显示老图 —— Cloudflare 对静态资源默认缓存 4 小时（甚至更久），且响应头带 Cache-Control: public, max-age=14400。
实操建议：
- 临时绕过：在图片 URL 后加查询参数，比如
avatar.a1b2c3.jpg） - 修改 Pages 项目设置：进入 Cloudflare Dashboard → Pages → 你的项目 → Settings → Functions & Variables → 添加自定义响应头规则，匹配
**/*.jpg，设置Cache-Control: public, max-age=3600 - 注意：HTML 文件本身也缓存，所以如果
index.html里写死旧图片名，光清图片缓存没用；需触发一次 HTML 重新部署
最常被忽略的是：你以为改了图片文件，其实 Git 没检测到变更（比如权限位变化或编辑器保存策略），git status 看不到，但 Pages 构建时拉取的仍是旧 commit。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
