HTML <img> 标签无法正常工作

7

我正在使用以下简单的HTML:

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <body>
            <img src="loading.gif" alt="MISSING GIF"> 
            <img src="j.JPG" alt="MISSING JPG">              
    </body>
    </html>

loading.gifj.jpg 与 HTML 文件在同一目录下。 在 IE 8 中,loading.gif 能够正常显示,但是 j.jpg 却无法加载。

在使用 Firefox 时,两张图片都能够正确显示。

请帮忙解决问题。


我尝试了几个其他的.JPG文件。一些被显示出来,而对于缺失的JPG则显示消息。这可能与图像.jpg文件有问题吗?所有文件在Firefox中都可以正常显示或直接在IE中打开。 - Aman Khanna
在这种情况下,您应该提供URL,即页面的URL和图像的URL。 - Jukka K. Korpela
11个回答

7

检查文件系统中的JPG文件扩展名是否为大写。我怀疑它是小写的。还要确保关闭图像标签。

<img src="j.jpg" alt="MISSING JPG"/> 

在文件系统中,文件名为j.JPG。我认为在Windows环境中大小写不应该有影响。在HTML中我改成了j.JPG,但仍然无法工作。 - Aman Khanna
我尝试使用另一个 .jpg 文件。这段代码有效。如何找到 .jpg 文件的问题。它在 IE 中正确打开,但在 HTML 中无法打开。 - Aman Khanna
@Aman Khanna 请尝试使用画图打开并使用不同的文件名保存。 - Kevin Bowersox
我使用了Paint和其他各种图像编辑器打开了图片,并更改了大小和其他参数,然后使用不同的名称保存。但仍然无法正常工作。 - Aman Khanna

2
<img src="loading.gif" alt="MISSING GIF">

将会像这样。
<img id="ImgEmployee" src="Photos/loading.gif" alt="MISSING GIF" />

1

我遇到过同样的问题,后来发现在使用WordPress时,应该使用以下代码来处理图像:

<img src="<?php bloginfo('template_directory'); ?>/images/example.jpg" alt = "example">

1

这个img文件最初是其他扩展名吗?如果是,恢复到原始扩展名。

我在Windows PC上以.png格式截取了屏幕截图。我将扩展名更改为.jpg(认为它与我的Mac相同)。IE不喜欢它,但Firefox可以正常使用。

<img src="1.jpg" />

我把文件后缀改回了 .png,两个浏览器都可以正常使用。

<img src="1.png" />

0

将扩展名转换为小写,并关闭img标签,您正在使用XHTML 1.0 Strict!

<img src="loading.gif" alt="MISSING GIF" />  
<img src="j.jpg" alt="MISSING JPG" /> 

编辑: 也许你遇到了IE8的一个bug... 给这个问题点个赞吧 :)

我们试试这样做:使用一个真正符合XHTML 1.0 Strict标准的页面,

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   <head>
      <title>hi!</title>
   </head>
   <body>
      <div>
         j.JPG : <img src="j.JPG" alt="MISSING JPG" /> 
                 (upper case) <br/>
         j.jPG : <img src="j.jPG" alt="MISSING JPG" /> 
                 (first lower case, others upper case <br/>
         j.jpg : <img src="j.jpg" alt="MISSING JPG" /> 
                 (lower case) <br/> 
      </div>
   </body>
</html>

创建文件的两个副本,这样你就会有上面列出的三个文件。然后在IE8中运行页面,告诉我们哪一个有效...


<img>是一个非容器标签,因此不需要关闭它。 - Lion
狮子,尝试在validator.w3.org中验证它:`第5行,第54列:省略了“img”的结束标记,但指定了OMITTAG NO”。抱歉...不行。 - Andrea Ligios
我关闭了标记,并在代码中尝试了 .jpg 和 .JPG。但它仍然无法工作。不确定为什么 .gif 文件能够正确显示。 - Aman Khanna
你确定文件不是jpeg格式,带有“e”吗?为了更好的帮助,请运行“dir”或“ls”,并将结果粘贴在此处编辑您的答案。 - Andrea Ligios
我使用dir命令检查了一下,文件名是j.JPG。即使我在HTML文件中使用j.JPG,它也无法工作。 - Aman Khanna
显示剩余3条评论

0

IE9/10也有问题吗?

另外,如果你上面发布的代码就是你文件里的内容,那么在doctype声明前面有一个不正确的字符(`)。

当你的HTML出现错误时,Internet Explorer会出现问题,而像Firefox这样的浏览器则更加宽容并尝试为您修复问题。


一些其他的 .jpg 图像可以正确显示。我认为这与特定文件有关,而不是 HTML 代码。 - Aman Khanna

0
最近我在使用WAMP服务器进行网站项目开发。我将我的网站放在c:/wamp/www/my_site文件夹下,并在页面上引用了该文件夹中的一张图片。但是图片没有显示出来。我尝试引用了桌面上的另一张图片,结果成功了。我认为这可能是权限问题... :)

0

我认为这是由于特定的图像原因。请检查您是否有使用这些文件的权限。 我之前也遇到了同样的问题。我同时运行了两个操作系统(Ubuntu和Windows),而我使用的图像来自于Windows本地磁盘。在解决了权限问题后,它就可以正常工作了。


0

我遇到的另一个可能的问题:

您的广告拦截器可能会阻止图像加载。
是的,即使图像托管在同一网站上。在我的情况下,我有一堆图像在/banners/imagename.jpg下,uBlockOrigin都被阻止了加载。这就是为什么甚至alt标签也没有显示出来。

检查网络选项卡,它应该会显示您遇到了什么问题。在我的情况下,这就是我发现的:
enter image description here


0
你有检查过头部是否有差异吗?有时由于某些GET请求,头部会更改为类似于这样的内容:{https:www.xyz.com/?id=blah-blah}。 现在,由于目录中不存在此类文件,img标签仍然不知道实际上应该在哪里查找资源。您需要再次将发送头更改为同一页,以便此次不会将GET请求连接到地址。 我花了很长时间才弄清楚。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接