用户在编辑器里把图旋转 90 度,数据库 angle 字段写成了 90,详情页正常,列表页缩略图还是原来的横向。清浏览器缓存后偶尔又对了。第一次遇到会往复杂处想,其实漏掉的多是个小前提。

convert in.jpg -rotate 90 out.jpg
curl -X PURGE https://cdn.example.com/img/abc_320.jpg
identify -format "%wx%h %[orientation]\n" out.jpg

旋转只写进了数据库,缩略图文件没有重新生成,列表页拿的还是旧文件。展示层有的地方读 angle 字段做 CSS 旋转,有的地方直接读图,两条路径结果不同。CDN 又缓存了旧缩略图。这一点先确认清楚,后面就不用反复试。

「旋转角度不一致」相关的验证我通常做两遍,改完一次、隔天再看一次,确认不是临时生效。把这次用到的命令存进笔记,比记住结论有用,换个环境还能照着走。

具体做法是,旋转后同步重生成缩略图 让文件本身是最终方向;统一展示口径 文件已经转正就不再叠加 CSS 旋转;按 URL 精确清掉该图的 CDN 缓存;确认列表和详情走同一个取图接口。

改完照着核一遍,旋转后列表页和详情页方向一致,刷新和换设备都不再变化,identify 显示的尺寸已是转置后的宽高。

作者 9823189