img未显示

Question

我有下面的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); 
}

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

Answer 1

右键单击“丢失的图像符号”，单击“属性”。看看它显示的URL -很可能是不正确的。如果当前页面在子文件夹中，则URL可能以错误结束。

您可能想要放入图像的确切URL：

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

Answer 2

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

Answer 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";