Estoy tratando de cambiar la imagen pasando el mouse sobre la imagen a través de las funciones de JavaScript. Estaba funcionando correctamente bien hasta el momento. Pero últimamente, cuando paso el mouse sobre la imagen, la imagen principal desaparece, lo que significa que el código javascript no funciona de alguna manera. Lo depuré en el navegador y me enteré del error que mencioné anteriormente. Intenté cambiar la ruta de la imagen dentro de javascript y también intenté cambiar la ruta del archivo javascript. Pero no funciona para mí. PD: estoy trabajando en un sitio web ASP.Net core mvc, por lo que mi archivo javascript está vinculado con la página de diseño.

Aquí está el código de las funciones de javascript que uso:

 function SwitchOn() { pic = "../images/switchon.png"; document.getElementById('headImg').src = pic; } function SwitchOff() { pic = "../images/logo.png"; document.getElementById('headImg').src = pic; }

Estas dos funciones existen en el archivo webvalidations.js que está vinculado con la página de diseño.

Así es como desaparece la imagen y aparece el error cuando paso el mouse sobre ella:

Esta es la forma en que uso ambas funciones a través de un evento en la etiqueta img:

 <img src="~/images/logo.png" id="headImg" onmouseover="SwitchOn()" onmouseout="SwitchOff()" style="height:100px;width:100px;" />

La imagen PS solo desaparece cuando paso el mouse sobre ella.