前端 - html显示图片时旋转了90度，为什么？

问题描述

问 题

今天测试遇到了一张神奇的图片：

https://oiijtsooa.qnssl.com/o...

使用链接直接在浏览器中打开能正常显示：

但是加了img 标签显示就旋转了90度：

<img src="https://oiijtsooa.qnssl.com/of591993aa064b7.jpg" width="100%"/>

怎么会出现这种诡异的现象？

哪位大神能告诉我这是怎么回事？

解决方案

如 @CRIMX 回答，图片确实携带了 EXIF 的旋转标记。

经过简单搜索，没有找到通过html直接解决此问题的方法。

不过我的图片是使用 七牛云 @七牛云 进行存储的，这就显示出第三方的方便与强大

只需要在链接后添加 imageMogr2/auto-orient 参数，即可根据原图EXIF信息自动旋正。

<img src="https://oiijtsooa.qnssl.com/of591993aa064b7.jpg?imageMogr2/auto-orient" height="100%"/>

七牛云存储-图片高级处理

这篇关于前端 - html显示图片时旋转了90度，为什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！