使用javascript设置图像源和背景图像

时间:2013-11-18 18:53:32

标签: javascript image dom background-image

我看了很多其他帖子,我想我正在使用建议的确切语法。但是,我没有让图像显示出来。我有jsfiddle。这是一个小问题吗?它也没有在我正在开发的网站上工作。

<div id="divtest">Hello</div>
<img id="imgtest" />
<img id="imgreal" src="http://www.premiumbeat.com/blog/wpcontent/uploads/2012/12/free.jpeg" />

var string = "url('http://www.premiumbeat.com/blog/wpcontent/uploads/2012/12/free.jpeg')";
alert(string)
document.getElementByID("divtest").style.backgroundImage = string;
document.getElementByID("imgtest").src = string;

2 个答案:

答案 0 :(得分:10)

两个小问题:

  1. getElementByID不是函数; getElementById是。

  2. 对于图像源和背景图像,网址的格式不同。试试这个: var string = 'http://www.premiumbeat.com/blog/wp-content/uploads/2012/12/free.jpeg'; document.getElementById("divtest").style.backgroundImage = "url('" + string + "')"; document.getElementById("imgtest").src = string;

答案 1 :(得分:3)

getElementByID替换为getElementById,代码中还有另一个错误:

你写道:

var string = "url('http://www.premiumbeat.com/blog/wp-content/uploads/2012/12/free.jpeg')";

document.getElementById("imgtest").src = string;

但是src不需要url(,所以你应该写:

var str1 = "url('http://www.premiumbeat.com/blog/wp-content/uploads/2012/12/free.jpeg')";
document.getElementById("divtest").style.backgroundImage = str1 ;

var str2 = 'http://www.premiumbeat.com/blog/wp-content/uploads/2012/12/free.jpeg';
document.getElementById("imgtest").src = str2;

希望这有帮助