无法显示 HTML 文件中的图像

Question

我正在尝试使用 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>

如果我在确切的目录中添加它会显示图像，但肯定有更有效的方法来做到这一点？此外，当我单击按钮时它不显示任何内容，它只显示单击按钮之前的图像。

Answer 1

我能够通过在特定目录中键入来显示图像。请参阅我的问题编辑代码。

无法显示 HTML 文件中的图像

Unable to display an image from HTML file

html

image

display