img 不显示答案

【问题标题】：img not showingimg 不显示
【发布时间】：2009-10-07 08:07:57
【问题描述】：

我有以下 javascript 函数来创建一个图像，该图像将在另一个图像悬停时显示，但图像没有加载...只是在找不到图像时出现的小符号。

这段代码有什么问题：

function createimg() 
{ 
   var img = new Image();
   img.src='images/imageoverlay.png';
   img.id = 'span1'; 
   img.style.zIndex = 10;  
   img.style.position = 'absolute';  
   img.style.display='none'; 
   img.style.top = '140px';  
   img.style.padding='10px'; 
   img.style.left='240px';    
   img.className ='dynamicSpan';  
   document.body.appendChild(img); 
}

图像位于此代码文件所在的图像子目录中。

【问题讨论】：

您是否尝试过设置警报以显示img.src 变量，检查它是否是有效路径，或使用 Firebug 查看是否正在请求文件，或检索时是否出现任何错误？跨度>
这个问题几乎可以肯定是img.src 中的路径不正确，否则你不会得到“丢失图像”图标。

标签： javascript html css image

【解决方案1】：

如果您将 img.style.display 设置为 none，则不会显示任何图像。这就是您指定的，这将隐藏您的图像（请参阅css reference：none：该元素根本不会生成任何框）。

【讨论】：

但即使将显示设置为“阻止”，实际图像也不会显示。肯定有其他问题...

【解决方案2】：

右键单击“缺少图像符号”，单击“属性”。查看它显示的 URL - 该 URL 可能不正确。如果当前页面位于子文件夹中，则 URL 可能会出错。

您可能希望输入图片的确切 URL：

img.src='http://yoursite.com/images/imageoverlay.png';

【讨论】：

【解决方案3】：

源，当在代码中指定时，是相对于页面的。

当在 CSS 中指定时，它是相对于 CSS 文件的。

例如，如果您有以下结构：

/page.html
/css/style.css
/scripts/script.js
/images/image.png

在page.html中：

<img src="images/image.png">

在 style.css 中：

#image { background-image: url(../images/image.png) }

注意“..”！这意味着先上一层，然后再下“图像”文件夹。

在 script.js 中：

img.src = "images/image.png";

【讨论】：

【解决方案4】：

您的代码在 IE 和 FF 中对我来说都很好（一旦我更改了 img.style.display='block';） - 所以这要么意味着图像的 URL 不正确（它应该是相对于你的页面的图像路径 - 或者只是使用绝对引用）或者您根本没有调用创建图像的函数。（或者你在错误的地方调用它，比如在 DOM 准备好之前的 <head></head>）

你是如何调用函数的？

【讨论】：