1-5.HTML中正确引用图片路径，图片却无法正常显示？（UTF-8编码）
时间：2015年05月24日 | 作者 : daPeng | 分类 : 1.零基础学网页前端 | 浏览: 6310次 | 评论 0 人
图片有时候在HTML引用路径正确的情况下，却无法正常显示。这个问题，真是让人百思不得其解。今天，我们来就这个话题进行讨论。
（不知道，自己的图片路径写得正确与否，查看一下正确的写法：点击这里）
首先，我们的根目录是在D:\test，网站首页index.html和图片文件在同一个目录层级。我们打开index.html进行编辑，我们首先引用4.png文件，发现图片正常显示。
（1）数字命名的图片，可以正常显示。
<img src="4.png" alt="">
（2）英文名字命名的图片，依然可以正常显示
<img src="x.png" alt="">
（3）中文名字命名的图片，同一路径而且正确引用情况下，依然无法正常显示图片
<img src="数组和数学函数.jpg" alt="">
问题神奇就神奇在这里，为什么其它两张图片可以，中文图片就不可以了呢？别急，如果有一直关注我们网站的朋友，此时候一定会恍然大悟：(⊙o⊙)哦！如果你是初来乍到，那请阅读以下这篇文章，相信你也会跟着：(⊙o⊙)哦！文章标题：网页的编码，链接地址：点击阅读。
我们编写的HTML代码和平常所见的图片是以一定形式的编码组成的，在没有对编码进行限定的时候，浏览器可能会默认采取自己认可的方式去对网页内容进行解释渲染（翻译），于是就可能会出现网站文字乱码（特别是中文页面）。在上面实例中，中文名字命名的图片引用地址从一开始就被浏览器以其默认（翻译）渲染方式翻译错误，既然名字都错了，自然就找不到图片了。原本自己路径写的是xx.jpg，结果浏览器错误认为是oo.jpg，能找到才怪呢。
（4）虽然声明了编码，但依然无法正常显示。
<!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title>Document</title> </head> <body> <img src="数组和数学函数.jpg" alt=""> </body> </html>
这里解释一下，要想使一个页面不乱码，必须做到文件编码和网页页面编码的一致。因为笔者使用的编辑软件是Sublime Text3，这软件编辑保存的页面默认编码为UTF-8，即使你在网页头部声明了为gb2312，也不满足上面说到的原则，即不一致。因此页面也无法正常显示。如果诸位是在记事本的ANSI模式下或者Notepad++等软件的默认编码页面下保存，应该不会出现这个问题。
（5）正确声明页面编码后，中文名字命名的图片，能够正常显示了
<!DOCTYPE html> <html> <head> <!--最关键的一句--> <meta charset="UTF-8"> <!--最关键的一句--> <title>Document</title> </head> <body> </body> </html>
最后，我们来看下实际的图片，也送给有需要的朋友。
最后的温馨提示：尽可能不使用中文命名文件夹或图片。无论出于什么情况，这都是不推荐的。
下一篇：2-2.Web和PHP