Question

> <!DOCTYPE html>
<head>
<title>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
</title>
</head>
<html>
<body>



<img id="trafficlight" src=asset[i]>
<button type="button" onclick= changeLights() > change</button>


<script>

var asset=["X:\HTML CA\Assets\red.png",
    "X:\HTML CA\Assets\red+orange.png",
    "X:\HTML CA\Assets\green.png",
    "X:\HTML CA\Assets\orange.png"];
var i=0;
function changeLights(){
    i=i+1;
    if (i===3){
        i =0;
    }
    else{
        document.getElementById('trafficlight').src=asset[i]
    }
}

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

.pngs显示为带有x的小黑方块。任何帮助，将不胜感激。我无法将图像上传到网站，因为我们对网络使用有限制，因此需要将我的资产保存在我正在使用的PC上

Answer 1

图片需要位于您网站的根目录中，或者位于您网站的文件夹中，例如：
如果您的本地网站路径是：C:\users\name\desktop\websites\website
图片应位于：C:\users\name\desktop\websites\website以及C:\users\name\desktop\websites\website\path\to\folder\here

中

实际的html：

<img src="path/to/img.png">

或将它们上传到外部图像服务器，但这可能意味着以后网站损坏，因为图像链接可能被更改/删除或图像本身可能被删除（ei：http://imgur.com/imgid.png）

实际的html：

<img src="http://imgur.com/imgid.png">

Answer 2

浏览器希望在与网页相同的文件夹中找到该图像。

如果您将图像存储在子文件夹中，则需要在src属性中包含文件夹名称，如示例所示：

<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

Answer 3

以下行不起作用：

<img id="trafficlight" src=asset[i]>

src属性未解析为Javascript。您可以手动将src属性设置为第一个元素，或者通过标记下的Javascript进行操作。

您的功能也应该改变：

function changeLights(){
    i=i+1;
    if (i===3){
        i =0;
    }
    document.getElementById('trafficlight').src=asset[i]
}

因为它会在重置为0时完全跳过设置图像。

onclick上的<button>属性应为以下字符串："changeLights()"。

您应该在<title> - 标签中包含页面标题而不是元数据。

您的路径需要转义 \ 或将其更改为 / 并且由于安全策略，您的浏览器不允许加载本地资源，因此您必须使用相对路径。

.pngs没有在浏览器中显示

3 个答案: