ie8浏览器 图片本身问题导致 无法显示图片--- 诡异现象的排查分享

引子:
 
 
 前段时间 做新版2.0 首页 的时候, 总感觉 新版首页 线上 精彩回顾下的 2张图片颜色怪怪的,当时以为是图片压缩太厉害导致的,由于实在太忙就没太在意!以下 是来自线上 截图:
 
 红色方框 我认为  那2张 怪怪的 图片,大家感受下颜色是否不一样!
 
 
 
问题描述:
 
       今天,测试同学找到我,说新版首页 精彩回顾下方 2张图片 在 ie8下 图片展现不出来了!
 
 
 
开始排查:
 
 通过 浏览器 查看图片 DOM结构, 代码如下:
 
 <img data-original="http://file.xxxx.com/view/banner/09e7286d39013387ff07e0efe7dc8c6ab3a51aef.jpg"  src="http://g.tbcdn.cn/s.gif" width="174" height="113” >
 
 
起初, 第一反应是图片地址问题,结合查看到的图片DOM结构,怀疑是 image  layzload 懒加载 机制导致,故而 尝试把 图片真实地址 直接写在 图片 img src 地址上 解决!
 
    ps:图片懒加载机制原理:
 
        通俗的讲就是js检测 用户鼠标滚动到 可视区域后,将预先埋在 img元素上 data-original 真实图片地址 替换到 图片 src上,从而达到图片懒加载的目的,实现性能优化!
 
 
结果 还是不行! 
 
呃~
 
 
 
进一步分析:
 
 快速列举下相关要素

  • 非 ie浏览器 正常显示图片;
  • 小于等于 原生ie 8 以下无法正常展现;
  • 非图片 懒加载检测机制问题;
  • 直接在浏览器中访问 图片地址 非 ie浏览器都正常显示, 原生ie8 及其以下不能正常显示(出现图片加载失败叉叉图标 )

初步分析结论:
 
     基于上述情况, 由此 分析出是2个可能性:

  • 图片地址问题(如:合法性、安全性等)
  • 图片本身问题

继续排查:
 
最初怀疑是 file路径关键字 影响(纯属自己假设歪歪),因为在window系统下,//file 是本地图片 window系统特有的路径地址,但 :

  1. ie8以上ok;
  2. 浏览器未发出警告和错误通知!说明url路径 安全、合法~
  3. 其他 同域名:http://file.xxxxx.com/ 下的图片展现正常!

故而 图片url地址 首先被 排除掉!

进一步排查:
 
将 无法正常 显示的图片 下载下来,二话不说,先查看图片信息:

  • 查看文件信息,如图:


 
 
 
 
看到没,CMYK!
 
猛然一惊,一眼 就瞅到 CMYK,顿时发现了 根本问题所在!于是也明白了 之前总觉得图片颜色怪怪的根本原因了!
 
 
 
先 特写感受下 RGB 和 CMYK 图片差异:
     
     以下2张相同图片,使用 不同颜色模式 视觉差异( 红色方框 的是 用于工业印刷用的),大家感受下:
 
 

CMYK颜色模式 简单解释:
 
     CMYK 颜色模式 主要用于  工业排版印刷使用,也被印刷业 称之为4色加色增强模式(青、品红、黄、黑值), 并不是 适用于 基于“光”色的3原色(红 绿 蓝) 256阶色的 屏幕 图片展示
 
  学过平面视觉设计或动画相关、美术专业 同学都知道,这里我就不多叽歪了! 
 
 
知道了图片主流这2种(总共3种) 颜色模式的差异,但和浏览器有什么关系呢?不急,往下看!
 
 
 
CMYK 各大 浏览器 支持情况:

Browser support for CMYK encoded images

Browser RGB CMYK
IE6, 7, 8 Yes No
IE9 Yes Yes
Firefox 2.x Yes No
Firefox 3.x - Yes Yes
Safari 4- Yes Yes
Google Chrome 5 - Yes Yes 

解决之道:
 
修复这个问题  (Fixing this issue)
 
Image editors such as Adobe Photoshop,  The Gimp, and others is capable of identifying if a jpg image is a CMYK image and saving a CMYK jpg as a RGB jpg. 
 
 
最佳方式,使用 Adobe Photoshop 图片编辑器或其他能够转换的图片编辑器,将图片 颜色模式 从CMYK  保存为 RGB 颜色模式即可!比如我的:


 
 
 
至此,保存重新上传后,ie8等显示正常!10分钟,问题解决!!!
 
 
 
 
刨根问底: 
 
 
     可能你会问? 既然 你说图片色彩模式有问题,那为什么 非ie 浏览器 都可以呢? 
 
 其实你让我回答,我只能说 人家 浏览器渲染引擎 比你ie的 trident引擎 先进,兼容、渲染机制处理的好! 从支持浏览器支持列表中也可以看到, Firefox 2.x 想当初也是不行滴!
 
 
 对于这个问题, 微软在新一代浏览器 里已经修复,故而从 ie9开始,可以正常展现!事实上从上面的支持 表中 或者 实际操作效果 来看,也是如此!
 
 
 
 
后记:
 
 
     这是一个隐藏很深,不容易被发现的 细节 所带来的图片展现问题, 我这里也只是有针对性的、简单的 剖析下原因! 抛砖引玉,供大家参考! 
 
 希望 运营同学、PD同学等其他 上传图片 的使用者们,注意下这个问题,谢谢!

时间: 2024-10-19 13:50:16

ie8浏览器 图片本身问题导致 无法显示图片--- 诡异现象的排查分享的相关文章

在数据库中 存储图片 以及 在界面中显示图片(存储图片路径)- 这种方法相对与存储二进制文件好

花了一下午时间,终于学会了在数据库中存储图片,以及在界面中显示图片了. 存储图片有两种方法: 一种是:直接把图片转换成二进制文件存储在数据库中. 一种是:存储图片的路径到数据库,用的时候直接调用路径给image等图像控件即可. 两种方法,有利有弊,第一种方法适合存储量少且重要的图片信息.第二种方法适合存储量大但不是太重要的图片. 我使用的是第二种方法,简单,实用. 下面就是我具体的实现过程: 首先我新建了两个网页文件,insert_photo.aspx / select_photo.apsx 第

将图片转换为Framebuffer格式(终端显示图片)

要在ubuntu终端显示图片或者在板子的LCD显示图片,Framebuffer是一个简单易用的接口,直接写入像素信息即可. 但普通的图片带有头部信息或者编码格式不同,直接送入Framebuffer是显示不出来的,需要扣出像素信息,并按照Framebuffer的RGBA顺序调整好,才能显示.所以现在的问题就是,如何获取framebuffer的信息,以及如何调整图片. 第一个问题,如何获取framebuffer的信息 对于ubuntu,可以安装fbset 进行查看 sudo apt-get inst

图片下载本地缓存时间戳显示图片方法

来源:http://ask.dcloud.net.cn/article/511 源码下载 参考文章http://ask.dcloud.net.cn/article/256http://ask.dcloud.net.cn/article/397 说明:为了方便,里面使用的图片来源是从上面文章中的源码项目获取的.说明:参考了上面文章中的思路,然后自己重新写了一个较为完整的图片本地缓存显示工具.功能1.第一次显示图片时下载到本地,然后之后如果本地存在缓存(根据url),则显示本地缓存的图片2. 基于p

DW 图片不显示的情况 ———网页只显示字不显示图片的情况 目录下的图片名被改动不显示图片的情况

例子1-- 酒瓶子 alt  在不现实图片的情况下显示汉字    图文效果展示     alt  1************************* 语句---- <body> <img src="imges/png-0040.png" width= "200"alt= " 酒瓶子" /> </body> 2************************* 3************************

Python中使用pickle Image等进行图片序列化及读取恢复显示图片

Python中有各种各样的学习扩展包,尤其是其在算法包方面,例如机器学习,深度学习等等都是十分出色的,同样我们也可以在Python中找到图像处理相关的扩展包例如PIL,Image等等,下面我们就使用olivettifaces人脸库,一个只有400张人脸总共40个人的迷你数据集,来向大家展示如何将图片保存为一个灰度值组成的大数组,并保存为一个pkl文件,然后再将数组序列恢复显示为一张图片. 图片总大小为1140*942,一共400个人脸图,每个人有10张不同角度的人脸,总共40个不同的人,故每张人

vue2.0实现图片加载失败默认显示图片

<div class="bg"> <img :src="goods.phoneFloorAd.resUrl" :onerror="errorImg01"> </div> <script type="text/ecmascript-6"> export default { data () { return { errorImg01: 'this.src="' + requ

项目实例改编:利用structs2的action 实时显示图片、pdf和其他内容的框架抽取。(转)

转自:http://www.verydemo.com/demo_c167_i1382.html 针对:预览文件(图片,PDF)文件来源为action中的inputStream 重点: structs2的action的配置 action的写法和结果类型 resulttype的写法 网页上实时显示   1 structs2的action的配置 首先在package的标签中加入自定义的结果类型<result-types>的名字displayResult,以及后面提到的自定义类DisplayFileR

对话框上动态控件的创建、在Picture Control控件上显示图片

1  MFC对话框之上的动态控件的创建 对话框上的控件是MFC类的一个具体对象. 当在对话框之上使用静态控件时,可以根据类向导来为每个控件添加消息.响应函数以及变量. 当需要在对话框中动态的创建某个控件时,就需要手动来代替类向导为动态控件添加消息.响应函数及变量. 动态创建控件时,可按照以下步骤进行: (1) 明确控件所属于的类 每一个控件都对应着一个类(例如按钮Button所属于的类为CButton). 如,在程序中我们需要用CButton类创建一个具体的按钮对象,并用函数指示它在对话框之上的

可以显示图片的类似网易新闻的头部滚动条(转)

声明:原文来自  http://www.jianshu.com/p/ce4909bc4752 前言, 最近发现一类效果类似网易新闻头部滚动条的效果,不过是可以显示图片(上, 中, 左, 右)和文字, 最近在比较闲的时候顺带把这些效果也一并实现了, 那么这一类的各种效果大致上就实现了Demo地址,供有需要的朋友可以参考 增加效果 图片在左边 图片在右边.gif 图片在上面.gif 只显示图片.gif 原来的效果 --- 只显示文字 oc版滚动示例.gif 关于实现部分, 新增显示的图片的效果, 其