When attempting to change an image using JavaScript, the image fails to load

Question

When attempting to change an image using JavaScript, the image fails to load

I am having trouble understanding what is wrong with my code.

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

When the page loads in the browser, the default image displays. However, when I click the image, the new image does not load as expected.

javascript jquery css html

Answer 1

Answer №1

When trying to access files, avoid using invalid file protocols like (file:///C:/mydir/index.html). It is recommended to place the files in the same directory as your HTML file and reference them simply by the file name (e.g. light_bulb_off3.jpg), or update the paths to a valid format (e.g. file:///C:/Users/ashokch/Desktop/light_bulb_off3.jpg)

Answer 2

When trying to access files, avoid using invalid file protocols like (file:///C:/mydir/index.html). It is recommended to place the files in the same directory as your HTML file and reference them simply by the file name (e.g. light_bulb_off3.jpg), or update the paths to a valid format (e.g. file:///C:/Users/ashokch/Desktop/light_bulb_off3.jpg)

Answer 3

Answer №2

Here is a helpful tip:

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

Make sure to remember the use of the file:/// protocol handler. Also, remember to use / (forward slash) instead of \ (backslash).

This method is specifically used to display local files in your web browser.

However, this only applies to local files.

If you want to serve these images through a web server, you need to create a folder within your web server's root directory.

For instance,

/images

You can then save your images in this created folder.

After that, adjust the image src or javascript attributes to the absolute path.

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

This will take the current URL, remove the hostname and protocol, and add the src.

For illustration purposes:

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

Absolute refers to having the protocol and hostname/path.

Relative refers to being relative to the root of your current domain (without any path).

Answer 4

Here is a helpful tip:

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

Make sure to remember the use of the file:/// protocol handler. Also, remember to use / (forward slash) instead of \ (backslash).

This method is specifically used to display local files in your web browser.

However, this only applies to local files.

If you want to serve these images through a web server, you need to create a folder within your web server's root directory.

For instance,

/images

You can then save your images in this created folder.

After that, adjust the image src or javascript attributes to the absolute path.

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

This will take the current URL, remove the hostname and protocol, and add the src.

For illustration purposes:

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

Absolute refers to having the protocol and hostname/path.

Relative refers to being relative to the root of your current domain (without any path).

Answer 5

Answer №3

Feel free to upload your pictures to a reliable image hosting platform such as:

or

After uploading, use the new links to view your images and make sure they are working properly.

"bulbon" ??? Have you heard of it before?

Answer 6

Feel free to upload your pictures to a reliable image hosting platform such as:

or

After uploading, use the new links to view your images and make sure they are working properly.

"bulbon" ??? Have you heard of it before?

Answer 7

Answer №4

To ensure proper image path linking within your project, make sure to reference images relative to the project directory rather than the file system itself. You can achieve this by copying the images into the project folder or providing a corresponding relative path. This approach will effectively resolve any related issues.

Answer 8

To ensure proper image path linking within your project, make sure to reference images relative to the project directory rather than the file system itself. You can achieve this by copying the images into the project folder or providing a corresponding relative path. This approach will effectively resolve any related issues.

When attempting to change an image using JavaScript, the image fails to load

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

use jquery to automatically invoke a function with the .animate method

Storing multiple text box values into a single application variable in C# - A Comprehensive Guide

Configuring JSON in PHP and JavaScript

Finding and choosing a date from an ng-model datepicker using Selenium Webdriver - a guide

Creating form elements without utilizing the <form action: MAILTO:> attribute

Unable to activate click function in Jquery

Exploring the Touch Feature in Angular

Press `Enter` to confirm your selection in the BootstrapVue message box input box

Delete a filename in Internet Explorer with the power of JavaScript and jQuery

Is there a way to cancel an AJAX request during the ajaxStart or ajaxSend event in jQuery?

Sending HTML input data to jQuery form field

Problem: Values are not being posted with AJAX when using $(form).serialize()

Is it possible to execute a JavaScript command before the function finishes its execution?

Is it possible to authenticate a user in Firebase using Node.js without utilizing the client side?

Searching for values within an array using the ".includes" method

Are there alternative methods for anchoring an element in Vuetify aside from using the v-toolbar component?

When working in Flask, I am experiencing an issue where my CSS is not linking to my

Contrasting ./ and $ in React project module imports

Using more than one button to activate a single Material-UI Popper component

The initial return value of $(document).height may be inaccurate, but is accurate upon recalculation