WordPress媒体库图片不显示或显示错误的原因及解决方案

经验分享 waitig 10027℃ 百度已收录 0评论

最近在自己开发一款WordPress主题-wait主题,但是在开发过程中突然出现了了一个奇葩的问题,媒体库图片不显示了!!总是显示那个加载中的小圆圈,而且上传图片也总是失败。折腾了两三天以后,终于发现了问题所在,赶紧记录下来。。。。

描述

最近在自己开发一款WordPress主题-wait主题,但是在开发过程中突然出现了了一个奇葩的问题,媒体库图片不显示了!!总是显示那个加载中的小圆圈,而且上传图片也总是失败。具体如下图所示:

image

而选择列表模式则显示正常:

image

尝试

发现这个问题以后,主题开发的其他工作只能暂时停止了,专心解决这个问题。

先去网上搜索,结果发现结果都是千篇一律,说什么文件夹权限问题啦,文件编码问题啦,插件设置问题等等。

可是我这是本地测试系统, 没有安装任何插件,也不存在权限问题,编码格式都是utf8无Bom格式。

倒是发现有几个网友出了和我一样的问题,但是下面没有任何人给出解决方案。。。。。

网上搜索无果后,只能自己摸索解决了。

探索

首先怀疑自己的主题函数与wp自带函数重名。于是打开upload.php,将其中的函数与自己写的函数一一比对,发现没有重名问题,故排除此选项。

然后检查admin文件,没有发现可疑情况。

在浏览器调试窗口中检查css和js的加载调试情况,也没有发现异常。

image

最后没办法了,打开代码窗口,一行一行查看代码,也没有发现啥可怀疑的。

就这样来来回回折腾了两三天,直到今天下午,无意中,我发现了问题的根源~~~~

问题

今天下午再一次查看代码的时候,突然发现了这么一条语句:

image

问题就出在这条语句上!!!!

来看w3school上对HTML声明的解释:

<!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前。

<!DOCTYPE> 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

在 HTML 4.01 中,<!DOCTYPE> 声明引用 DTD,因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则,这样浏览器才能正确地呈现内容。

HTML5 不基于 SGML,所以不需要引用 DTD。

提示:请始终向 HTML 文档添加 <!DOCTYPE> 声明,这样浏览器才能获知文档类型。

<!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前!

<!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前!

<!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前!

重要的话说三遍~~

所以,只要上面那条讨厌的语句去掉,就可以解决这个问题了~~

解决

查找源代码,发现是我的admin文件中有这么一句引用:

image

当时以为是这条语句会在网页正文里,所以就写上了,但是今天才发现,无论将它放到哪里,它总是会出现在网页第一行!!!WTF!!!

只好将其删掉,将css代码写到了文件里,问题才算成功解决~~~~

总结

1、不要盲目相信网络上的东西,自己动手才是王道

2、调试bug,要从源代码入手。

3、碰到问题要冷静,千万不要急躁~~

4、自己动手,丰衣足食~~~

——————————2016-09-12 更新解决方式———————————

解决方式

其实上面说了这么多,是为了告诉大家我解决这个问题的过程。

造成这种问题的原因很多,像我遇到的这种情况,原因就是在<!DOCTYPE> 声明之前有其他的代码,导致浏览器不能正确识别页面的标准,所以才造成了某些基于html5的特性不能使用。

去掉这些代码之后,问题就解决了。

当然,我这只是介绍了我所遇到的这一种情况,造成这种问题的原因有很多,不可一概而论,大家要根据自己碰到的情况具体分析,才能找到问题的根源,从而解决掉。

另外,如果你是用的原生的wordpress的话,那么造成这个问题原因可能是你使用的某些插件或者主题代码不规范,一一禁用他们来查出具体是哪个的问题,换掉这个插件即可。

——————————2016-09-12 更新完毕————————————-

转载注明出处等英博客

转载注明出处等英博客

转载注明出处等英博客

重要的话说三遍~~

 


本文由【waitig】发表在等英博客
本文固定链接:WordPress媒体库图片不显示或显示错误的原因及解决方案
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (28)分享 (0)