IE11部分图片无法显示的兼容办法

　　问题描述:写的网页在浏览器中测试兼容问题,FF,Chrome,Edge都完美兼容(包括Edge中的仿真),但是在IE11中却无法显示部分图片,并且报:DOM7009: 无法解码 URL 处的图像 错误.

　　问题截图:

　　

　　

　　看到出BUG的我眼泪掉下来,没事干在IE里面测什么测啊..但是出了问题就要解决.为什么会出现图片无法显示的错误呢?下面看一下我的解决思路:

　　

　　代码:

<div class="three">
            <a href="#"><img src="data:image/main1-three-1.png" /></a>
            <a href="#"><img class="zs2" src="data:image/main1-three-2.png" /></a>
        </div>

　　很简单的一段代码,所以不可能是代码的原因.难道是我浏览器的毛病?不可能啊,其他图片都可以显示,为什么单单是这两张?

　　于是我开始了我的谷歌之路.在我谷歌了近1个小时的崩溃中,终于让我发现了错误在哪.(在此感谢CSDN...)

　　原来可能是之前这两张图片的后缀是JPG,不知道什么原因改成PNG了,在IE11中就会报错.只需要把后缀改回来就可以了.于是代码成了这样:

<div class="three">
            <a href="#"><img src="data:image/main1-three-1.jpg" /></a>
            <a href="#"><img class="zs2" src="data:image/main1-three-2.jpg" /></a>
        </div>

　　相应的在本地的img标签的后缀也改回来.刷新页面

　　并且其他浏览器依旧兼容.

　　但是虽然说是解决了BUG,但是为什么呢?为什么其他浏览器可以,而IE11不行?难道是IE11对图片的解码有问题吗?

　　在资料中找到这样一句话:IE11 已经通过将解码过程的某些步骤直接移动到 GPU（在这里可以更快并且并行地进行解码过程）来简化 JPG 解码。难道是这个原因吗?

　　本小白真的是不明白了,希望看到的大神能解释一下原因?在此拜谢.