Question

这是我的代码，我无法理解这有什么问题。

<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>

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

Answer 1

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

Answer 2

试试这个：

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

请注意 file：/// 协议处理程序。而 / （斜杠）代替 \ （反斜杠）。

用于在浏览器中显示本地文件。

但这仅适用于本地文件。

如果您希望网络服务器提供这些图片，请在您的网络服务器根文件夹中创建一个文件夹。

示例

/images

将图像存储在该文件夹中。

然后将您的图片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">

绝对表示使用协议和主机名/路径。

相对表示相对于当前域的根目录（没有任何路径）。

Answer 3

将您的图片上传到免费图片托管网站，例如： -

http://photobucket.com/或 https://imageshack.com/

使用新的网络链接到图片＆amp;检查它是否有效。

“bulbon”???它是什么？

Answer 4

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

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

4 个答案: