html显示图片时旋转了90度,为什么?

发布于 2022-09-04 22:38:59 字数 675 浏览 21 评论 0

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

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

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

图片描述

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

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

图片描述

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

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

甜点 2022-09-11 22:38:59

你图片的 EXIF 里标记了旋转 Rotate 90 CW 直接打开图片 chrome 会自动调整过来。

情独悲 2022-09-11 22:38:59

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

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

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

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

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

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文