20.7　当图像不出现时

小红叉、碎片图标、替代文本，或者什么都不显示——这都是图像未能正确加载的标志，如图20.7.1和图20.7.2所示。如果你希望显示的是一张大蜥蜴的照片，那么不管出现上述哪种情况都是令人恼火的。

修复缺失的图像

  • 首先检查图像在服务器上的文件名是否与img元素中引用的名称严格匹配，包括大小写、扩展名（参见图20.7.1）。

  • 不要在文件名中包含空格。参见1.6节。

  • 确保img元素的src属性中的图像URL是正确的。一种简单的测试方法就是将图像放到HTML页面所在的目录。这样就只需要img元素中的文件名和扩展名正确就可以了，无需引入路径信息。如果图像显示出来了，问题很可能就出在路径上。不过，将图像放在HTML文件所在的目录并不好，因为这样的话，网站很快就会变得无序。因此，在测试之后，要将图像从HTML页面目录移出，并修改指向图像的src路径。参见1.7节。

  • 如果在你的计算机上查看页面时图像是显示的，而将页面上传至服务器之后，图像却没有显示出来，要确保已经将图像上传到了服务器。

  • 把图像保存为PNG、JPEG或GIF格式了吗？如果是的话，所有的浏览器都能显示该图像；如果保存为BMP或TIFF，则并非所有的浏览器都能显示图像。更多信息参见第5章。

  1. ...
  2. <body>
  3. <h1>Mary Anna, the Iguana</h1>
  4.  
  5. <p><img src="Iguana.jpg" width="220" height="165" alt="Mary Anna, the Iguana" /> There once was an iguana ...</p>
  6. </body>
  7. </html>

图20.7.1　图像的文件名为iguana.jpg，但在HTML中，引用的却是Iguana.jpg（以大写字母I开头）。因此，在服务器上检查页面时，图像不会显示(如图20.7.2所示)

20.7　当图像不出现时 - 图1

图20.7.2　在你的计算机上，如果系统不区分文件名的大小写，页面看起来就没有问题。但将页面发布到区分大小写的服务器上以后，便无法找到图像，仅显示alt文本