Question

正如您在下面看到它的工作代码，但问题是当我向老师提供此代码时，我不会上网。因此，我需要使用已保存在文档中的图片。 The picture is called image2.jpg and I got two other pictures called image1.jpg and image3.jpg

<html>
<body>

<p>Click the button to change to the next light.</p>

<img id="starting_light" src="http://mars.wiwi.hu-berlin.de/mediawiki/sk/images/thumb/1/1f/Red_Light_Icon.svg/232px-Red_Light_Icon.svg.png">

<button type="button" onclick="nextLightClick()">Next Light</button>

<script>

var lights = new Array("http://mars.wiwi.hu-berlin.de/mediawiki/sk/images/thumb/1/1f/Red_Light_Icon.svg/232px-Red_Light_Icon.svg.png","https://upload.wikimedia.org/wikipedia/commons/thumb/4/45/Yellow_Light_Icon.svg/232px-Yellow_Light_Icon.svg.png","https://upload.wikimedia.org/wikipedia/commons/4/4b/Green_Light_Icon.svg");



var index = 0;
var lightsLen = lights.length;

function nextLightClick() {
    index++;

    if (index == lightsLen) 
        index = 0;

    var image = document.getElementById('starting_light');
    image.src = lights[index];
}
</script>

</body>
</html>

你们中的一位专家可以更改此代码，以便来自互联网的这3张图片来自我的文档。我不知道如何在我的文档中创建图片的路径。 HTML代码和图片在同一个文件夹中，但它仍然无法正常工作。

Answer 1

确保html文件与图像位于同一本地文件夹中，然后尝试此操作（所以没有任何文件夹）：

var lights = new Array("image1.jpg","image2.jpg","image3.jpg");

浏览器假定它与您的html文件位于同一文件夹中，并且它们将被加载。不需要完整的路径！

Answer 2

您最好的选择可能是将这三张图片保存到您的计算机上，然后将它们移到您的html文档旁边的文件夹中。我通常使用根文件夹设置我的文件以保存所有项目文件，使用我的html / php /根文件夹中的任何文件，以及名为Images的子文件夹。

将所有图片和支持文件放在该文件夹中，并从Javascript中引用它们，如下所示：

var lights = new Array("\Images\232px-red_Light_Icon.svg.png", "\Images\232px-Yellow_Light_Icon.svg.png", etc);

为了澄清，您已将原始网络路径更改为本地路径。您不必包含完整的文件路径（例如C:\Users\Username\Pictures\image.png），因为默认情况下，您的脚本会查找html文档所在的文件夹，以及您指定的路径。如果您的html文档位于C:\Users\User\Documents\中，则上面数组中描述的本地路径将等于C:\Users\Documents\Images\232px-red_Light_Icon.svg.png。

如果您将文件存储在计算机上您想要使用的其他位置，则可以通过键入完整位置（例如C:\Users\Documents\Images\232px-red_Light_Icon.svg.png）来指定完整路径，但这是不好的做法，因为如果您移动或重命名该文件，您可能不会释放它在脚本中引用。通过在与脚本相同的文件夹中使用Images文件夹，您实际上可以复制该根文件夹并将其移动到任何位置，它仍将具有所有支持文件。

希望这有帮助！

如何从我的文档中将此图片更改为一张？

2 个答案: