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 replace this color with that color in CSS every time it appears

The selected custom button color is not appearing as intended when viewed in the

Iterate over a JSON array using jQuery

Interpolating UV is not allowed: 'flat': Using a reserved word in an illegal manner

Issue with locating image source in Angular 4

Saving a user with a BLOB avatar in Angular 5: Tips and Tricks for Success

Move the JavaScript code from the <script> element in the HTML file to a

What's preventing me from utilizing Leaflet Map on Next.js despite attempting Dynamic Import?

How to use ajax to add multiple products to the cart in WooCommerce using a single add-to-cart button?

Incorporate a unique element onto your WordPress homepage

Struggling to make addClass and removeClass function correctly for the development of the unique "15 puzzle" game

Embarking on the GSAP journey

Has the HTML attribute 'step' stopped functioning properly?

Creating dynamic child components in Vue.js version 2

Why does my navbar toggler automatically display the navbar items?

The parent div's height is not compatible with the CSS grid

In JavaScript, you can use the document.cookie property to delete specific cookie values identified by their names and values

Avoiding duplicate borders in grid layout

The Keyup Filter in the FromEvent function is malfunctioning and not behaving as anticipated

Adding a contact form to a slider: A step-by-step guide