ASP.NET Core MVC站点JS悬停切换图片报404错误问题咨询

你遇到的404错误核心原因是JavaScript中使用的../相对路径是相对于当前访问页面的URL，而非JS文件的存放位置。此前功能正常是因为你之前测试的页面都处于同一路由层级，../解析结果正确，后续路由规则调整或者你访问了其他层级的页面，就会触发路径解析错误，最终指向错误的图片地址。

方案1：使用站点根目录绝对路径（简单快捷） #

直接修改webvalidations.js中的图片路径，从站点根目录开始写，不需要相对路径：

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

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

如果你的站点部署在域名子目录下，需要在路径前加上子目录前缀，例如/subapp/images/switchon.png

方案2：动态获取站点根路径（适配所有部署场景） #

如果不想写死路径，适配不同部署环境，可以在布局页的<head>标签中提前注入全局根路径变量：

<!-- 放在布局页head中，引入webvalidations.js之前 -->
<script>
    window.siteRoot = '@Url.Content("~/")';
</script>

然后修改JS代码使用全局变量拼接路径：

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

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

改完后可以直接在浏览器地址栏输入拼接后的图片地址验证是否可以正常访问，确认路径正确即可解决问题。

内容的提问来源于stack exchange，提问作者Azhar Qureshi