Question

在此代码中，一旦我在浏览器中运行图像，图像就不会出现。我尝试过不同的浏览器和不同的方法来对图像进行排序。你能告诉我为什么会这样，以及我将如何解决这个问题，因为我已经尝试了好几天了。谢谢

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Traffic Light Sequence</title>
<body>
<h2>Manuel Traffic Light Sequence</h2>
<img id="light" src="C:\Users\Mrs Afolabi\Documents\Computing\lights\red.gif">
<button type="button" onClick="changeLights()">Change Lights</button>
<script>
var list = [
    "C:\Users\Mrs Afolabi\Documents\Computing\lights\green.gif",
    "C:\Users\Mrs Afolabi\Documents\Computing\lights\amber.gif",
    "C:\Users\Mrs Afolabi\Documents\Computing\lights\red.gif"
];

var index = 0;

function changeLights() 
{
    index = index + 1;
    if (index == list.length) index = 0;
    var image = document.getElementById('light');
    image.src=list[index];
}
</script>
</body>
</html>

Answer 1

<html lang="en">

<head>

    <meta charset="utf-8">

    <title> Traffic Light Sequence</title>
</head>

<body>


<h2>Manuel Traffic Light Sequence</h2>


<img id="light" src="red.gif">


<button type="button" onClick="changeLights()">Change Lights</button>


<script>

    var list = [

        "red.gif",

        "green.gif",

        "amber.gif"

    ];

    var index = 0;

    function changeLights() {

        index = index + 1;

        if (index == list.length) index = 0;

        var image = document.getElementById('light');

        image.src = list[index];

    }
</script>
</body>
</html>

我已经清理了一点代码。请注意，full path已从图像中删除。

如果图像直接位于HTML文件旁边，则HTML文件位于何处，则它们不需要绝对路径（c:/...）。而应使用相对路径。因此，假设在C:\Users\Mrs Afolabi\Documents\Computing\lights\index.html找到了HTML文件，则下面的代码应该可以正常工作，因为它可以轻松找到.gif个文件。

Answer 2

原则上，无法访问file://，C://等开头的此类网址（来自用户的计算机）...（在任何网络浏览器中））

如果您的文件位于计算机的某个目录中，则可以输入您在同一目录中使用的文件，例如：

src/styles.css，file.png等

为什么图像不会出现在浏览器中？

2 个答案: