使用javascript更改图像时未加载img_Javascript_Jquery_Css_Html

使用javascript更改图像时未加载img

javascript jquery css html

使用javascript更改图像时未加载img,javascript,jquery,css,html,Javascript,Jquery,Css,Html,这是我的代码，我不明白这是怎么回事 <html> <body> <script type="text/javascript"> function changeImage() { var image = document.getElementById('myImage'); if (image.src.match("bulbon")) { image.src = "C:\Users\ashokch\Desktop\

这是我的代码，我不明白这是怎么回事

<html>
<body>
 <script type="text/javascript">
   function changeImage() {
     var image = document.getElementById('myImage');
     if (image.src.match("bulbon")) {
          image.src = "C:\Users\ashokch\Desktop\light_bulb_off3.jpg";
     } else {
       image.src = "C:\Users\ashokch\Desktop\bulbon.png";
    } 
 }
</script>

  <img id="myImage" onclick="changeImage()"
    src="C:\Users\ashokch\Desktop\light_bulb_off3.jpg"      width="100" height="180">


      <p>Click the light bulb to turn on/off the light</p>

      </body>
   </html>


函数changeImage（）{
var image=document.getElementById（'myImage'）；
if（image.src.match（“bulbon”））{
image.src=“C:\Users\ashokch\Desktop\light\u bulb\u off3.jpg”；
}否则{
image.src=“C:\Users\ashokch\Desktop\bulbon.png”；
} 
}
单击灯泡以打开/关闭灯

当页面进入浏览器时，会显示默认图像，但当我单击图像时，更改图像不会加载

将图像上载到免费图像托管网站，如：-

或

使用新的图像链接并检查其是否有效

“波本”？？？是什么？

将图像上传到免费图像托管网站，如：-

或

使用新的图像链接并检查其是否有效

“波本”？？？它是什么？

映像路径应该相对于项目/代码目录，而不是文件系统。将图像复制到项目目录中或提供相对路径。这将解决问题。

您的映像路径应该相对于项目/代码目录，而不是文件系统。将图像复制到项目目录中或提供相对路径。这将解决问题。

您没有使用有效的文件协议(file:///C:/mydir/index.html)访问这些文件。正如其他人所说，将它们“下一步”移动到html文件，只使用没有路径的文件名（例如light_bulb_off3.jpg），或者将路径更改为有效的路径（例如。file:///C:/Users/ashokch/Desktop/light_bulb_off3.jpg)您没有使用有效的文件协议(file:///C:/mydir/index.html)访问这些文件。正如其他人所说，将它们“下一步”移动到html文件，只使用没有路径的文件名（例如light_bulb_off3.jpg），或者将路径更改为有效的路径（例如。file:///C:/Users/ashokch/Desktop/light_bulb_off3.jpg)试试这个：

<img src="file:///C:/Users/ashokch/Desktop/light_bulb_off3.jpg">

并将您的图像存储在该文件夹中

然后将图像src或javascript属性指向绝对路径

<img src="/images/my-image.jpg">

这将获取您当前的url，去掉主机名和协议，并附加src
示例

http://www.example.org/folder/test.html <img src="{http://www.example.org}/images/my-image.jpg"> <img src="{http://www.example.org/folder/}images/my-image.jpg"> <img src="http://www.some-image-host.com/xyz123.jpg">

http://www.example.org/folder/test.html
绝对表示协议和主机名/路径
Relative表示相对于当前域的根目录（没有任何路径）。
尝试以下操作：

<img src="file:///C:/Users/ashokch/Desktop/light_bulb_off3.jpg">
并将您的图像存储在该文件夹中
然后将图像src或javascript属性指向绝对路径

<img src="/images/my-image.jpg">

这将获取您当前的url，去掉主机名和协议，并附加src
示例

http://www.example.org/folder/test.html <img src="{http://www.example.org}/images/my-image.jpg"> <img src="{http://www.example.org/folder/}images/my-image.jpg"> <img src="http://www.some-image-host.com/xyz123.jpg">

http://www.example.org/folder/test.html
绝对表示协议和主机名/路径

Relative是指相对于当前域的根目录（没有任何路径）。
错在哪里：您使用*c:*文件路径指向文件系统。使用HTML时，文件路径是相对的。您需要在web服务器上执行操作，而不是从本地文件执行操作。我敢打赌，如果你检查你的DOM，你会看到变化，它们不会像这样工作。为什么要使用jQuery标记？我看不到。虽然您不应该使用本地文件作为URL，但我认为这里的问题之一是您没有逃避斜杠，因此
C:\Users
实际上被解析为
C:Users
。尝试
C:\\Users
等等。错误：使用*C:*文件路径在使用HTML时是相对的。您需要在web服务器上执行操作，而不是从本地文件执行操作。我敢打赌，如果你检查你的DOM，你会看到变化，它们不会像这样工作。为什么要使用jQuery标记？我看不到。虽然您不应该使用本地文件作为URL，但我认为这里的问题之一是您没有逃避斜杠，因此
C:\Users
实际上被解析为
C:Users
。试试
C:\\Users
等等。是的，我同意。不久前我也遇到过类似的问题。要么把它们放在服务器环境中，要么调用相对路径。不久前我也遇到过类似的问题。将它们放在服务器环境中，或者调用相对路径。