未在Javascript中显示的图像

我是按照讲师的代码来做的。当你点击按钮时，一个图像应该带有一个文本。另外，当鼠标悬停在按钮上时，它们会改变颜色（这部分工作正常）。 文本也会出现。但图像并不是这样。在讲师的代码中，它运行良好。有人能帮我吗？：）

函数haha（）{
设i=document.getElementById（“img”）；
让url=“haha.jpg”；
i、 style.backgroundImage=`url（${url}）`；
document.getElementById（“facetext”）.innerHTML=“这是我的哈哈脸”；
}
函数happy（）{
设i=document.getElementById（“img”）；
让url=“happy.png”；
i、 style.backgroundImage=`url（${url}）`；
document.getElementById（“facetext”）.innerHTML=“这是我的笑脸”；
}
函数（）{
设i=document.getElementById（“img”）；
让url=“angry.jpg”；
i、 style.backgroundImage=`url（${url}）`；
document.getElementById（“facetext”）.innerHTML=“这是我愤怒的脸”；
}
功能更改BG（颜色）{
color.style.backgroundColor=“蓝色”；
}
函数defaultbg（颜色）{
color.style.backgroundColor=“白色”；
}
笑脸


愤怒的脸


哈哈脸

如果图像确实与HTML页面位于同一目录中，那么代码看起来工作正常

但是，如果div

#img

没有任何样式，则其高度为

0px

。您可能只需要为其设置一个高度：

#img{高度：200px；}

您的图像在哪里？如何运行您的网页？您使用哪个Web服务器？图像的路径是否正确？您的JS正在工作，图像URL设置为背景，

angry.jpg

如果与HTML页面位于同一目录中，则可以正常工作。您可能只需要在CSS中为该

#img

div设置一个

高度（没有任何CSS，它的高度是
0px
）哦..它起作用了。非常感谢：）@blex这应该是一个答案。