部分浏览器不显示图片的可能原因--图片命名与浏览器广告过滤

这几天在做一个小项目的时候遇到了这样的问题：

 

在index.html里面使用了一张图片如下(ad.png)：

<div class="download">
        <a id='softWareDownload' href="#">
            <img src="images/ad.png" class="ad" />
        </a>
    </div>

 接下来测试的时候问题就来了，如下：

 

在PC端测试，ad.png是正常显示的；

在手机上的其它非UC浏览器上ad.png也显示正常；

但是，在手机的UC浏览器上ad.png不显示，一片空白；

不再服务器环境测试，直接在本地打开index.html的话在所有浏览器上ad.png是正常显示的；

换成其它图片(图片名也换了)，在所有浏览器上图片也是正常显示的；

在任何浏览器上(包括手机端UC)，此图片(ad.png)的点击事件是正常的，加了border也能显示出来；

 

思考：为什么其它浏览器都显示正常，就偏偏手机UC上出问题，从上面的问题来看，初步判断应该是图片自身的问题，那么，图片都有哪些属性：名字、大小、格式等，很可惜我先想到的是大小和格式的问题，搞了老半天没搞明白，最终在改图片名字的时候发现了根本原因，如下：

有些浏览器可能会将以"ad"命名的文件、id或class当做广告过滤掉或屏蔽。

因此，我们只需要改一下图片的名字就行了(class名我没有改试了下也是可以的，但建议大家还是不要用ad做class名)。

希望此博客能对大家有用！