古语说,“一张照片值得一千字”。这在网络上尤其如此,其中的注意力跨度是众所周知的,所以正确的形象可以通过吸引正确的注意力和吸引访问页面的访问者足够长的时间来了解他们需要学习或执行的具体内容为网站发出“赢”的动作。是的,当谈到网站时,图片实际上可能价值超过一千个字!
所以建立在线图像的重要性,接下来我们来看看你的网站是说如果一个应该在网站上的图像无法加载?无论您是使用HTML内置的内联图像或CSS应用的背景图片(您的网站都可能具有这两个),这可能会发生。底线是当图形无法加载在页面上时,它会使设计看起来很坏,并且在某些情况下可能会彻底破坏该站点上的用户体验。图片发送的“千言”当然不是正面的!
我们来看看图像无法加载到网站上的一些常见原因,以及在网站测试期间对此问题进行故障排除时应注意的几点。
文件路径不正确
将图像添加到站点的HTML或CSS文件时,必须创建路径到目录结构中位于这些文件的位置。
这是代码,告诉浏览器在哪里寻找并从中获取图像。在大多数情况下,这将在名为“图像”的文件夹中。如果此文件夹的路径及其内部的文件不正确,则无法正确加载图像,因为浏览器将无法检索正确的文件。
它将遵循你告诉它的路径,但它将会陷入死胡同,而不是显示适当的图像,将会变成空白。
调试图像加载问题的步骤1是确保您编码的文件路径正确。也许您指定了错误的目录或没有正确列出该目录的路径。如果不是这样,您可能会遇到另一个问题。继续阅读
文件名拼写错误
当您检查文件的文件路径时,还要确保您正确拼写了图像的名称。根据我的经验,不正确的名字或拼写错误是图像加载问题的最常见原因。记住,Web浏览器对于文件名来说是非常不原谅的。如果您错误地忘记了一封信或使用错误的信件,浏览器将不会查找类似的文件,并说:“哦,你可能是这个意思吗?否 – 如果文件拼写错误,即使它很近,也不会在页面上加载。
3.错误的文件扩展名
在某些情况下,您可能会将该文件的名称拼写正确,但文件扩展名可能不正确。如果您的图像是.jpg文件,但是您的HTML正在寻找.png,则会出现问题。确保您正在为每个图像使用正确的文件类型,然后确保您已经在您的网站的代码中调用了相同的扩展名。
还要寻找区分大小写。如果您的文件以.JPG结尾,所有字母都以大写形式显示,但您的代码引用.jpg,所有小写,某些Web服务器将看到这两个不同的,即使它们是相同的字母集。案例敏感度计数!这就是为什么我总是保存所有小写字母的文件。这样做允许我在我的代码中始终使用小写,从而消除了我在图像文件中可能出现的一个问题。
文件丢失
如果您的图像文件的路径正确,并且名称和文件扩展名也是无错误的,则要检查的下一个项目是确保文件实际上传到Web服务器。当网站启动时,忽略将文件上传到该服务器是一个容易忽视的常见错误。你如何解决这个问题?
上传这些图像,刷新您的网页,它应该立即显示文件。您也可以尝试删除服务器上的映像并重新上载。这可能看起来很奇怪,但是我已经看到这个工作不止一次了。有时文件被破坏,所以这个“删除和替换”方法最终可以帮助。
5.托管图像的网站已关闭
您通常希望托管您的站点在您自己的服务器上使用的任何图像,但在某些情况下,您可能会使用托管在其他地方的图像。如果托管该图像的站点下降,您的图像将不会加载。
转移问题
无论是从外部域还是从您自己的图像文件加载,当浏览器首次请求时,都可能会有该文件的传输问题。这不应该是一个常见的事情(如果是,您可能需要寻找一个新的托管提供商),但它可能会不时发生。
这个问题的不幸之处在于,您无法做任何事情,因为这是您无法控制的问题。他们的好消息是,这是一个临时性问题,经常很快解决。例如,当有人看到一个破旧的页面并进行刷新时,它们通常会解决问题并正确加载图像。如果您看到图像不正确,请刷新浏览器,看看是否只是传输问题你的初始请求。
一些最后的笔记
当考虑图像和加载问题时,还需要注意的两个方面是正确使用ALT标签和您的网站的速度和整体性能。
ALT或“替代文字”,如果图像无法加载,则标签是浏览器显示的。它们也是创建可被某些残疾人使用的可访问网站的重要组成部分。您网站中的每个内联图片都应该有一个适当的ALT标签。请注意,使用CSS应用的图像不具有此属性。
对于网站性能 – 加载太多图像,甚至只是几个巨大的图像,没有适当的优化网络传递,将会对加载速度产生负面影响。
因此,请确保测试您在网站设计中使用的任何图像的影响,并采取必要步骤来改善该网站的性能,同时仍然创建适合您的网站项目的整体外观。