【发布时间】：2017-03-29 10:03:03
【问题描述】：
我正在尝试使用 HTML、JavaScript 和 CSS 制作网页，但我的图像文件无法显示。我的 img 文件夹与 html 文件所在的文件夹位于同一文件夹中。 我想显示未装饰的树，然后当用户单击按钮以显示其他图像时，它只显示图像 alt 消息。
<!DOCTYPE html>
<html>
<title>
Christmas
</title>
<body>
<h1>Lets decorate this chritmas tree!</h1>
<button onclick="document.getElementById('xmasTreeImage').src='decoratedtree.jpg'">Decorate the tree</button>
<img id="xmasTreeImage" alt="Can't display" src="undecoratedtree.jpg" style="width:100px">
<button onclick="document.getElementById('xmasTreeImage').src='undecoratedtree.jpg'">Take away the decorations</button>
</body>
</html>
更新：
<!DOCTYPE html>
<html>
<title>
Christmas
</title>
<body>
<h1>Lets decorate this chritmas tree!</h1>
<button onclick="document.getElementById('xmasTreeImage').src='C:\Users\Me\Documents\ChristmasWebProject/decoratedtree.jpg'">Decorate the tree</button>
<img id="xmasTreeImage" alt="Can't display" src="C:\Users\Me\Documents\ChristmasWebProject/undecoratedtree.jpg" style="width:100px">
<button onclick="document.getElementById('xmasTreeImage').src='C:\Users\Me\Documents\ChristmasWebProject/undecoratedtree.jpg'">Take away the decorations</button>
</body>
</html>
如果我添加到它显示图像的确切目录中，但肯定有更有效的方法来做到这一点？此外，当我单击按钮时它不显示任何内容，它仅在我单击按钮之前显示图像。
【问题讨论】：
-
这里你需要检查这个图像路径。这个加载器是否正确？
-
是的，它与 HTML 文件 @caramba 位于同一目录中
-
你能打开和保存网络图片吗？不经常发生，但检查图像文件权限。或将图像拖放到浏览器中，然后尝试从 URL 复制/粘贴路径到您的 HTML 文件中。
-
你已经设置了宽度，你设置了高度吗？
-
您可以通过将鼠标悬停在此图像链接上来检查检查元素。之后您需要右键单击并在新选项卡中打开此图像链接，您将了解路径是否正确或不是。