.NET Core框架下定时切换图片功能异常问题求助

• ~是ASP.NET Core Razor的服务端路径符号，仅在服务端渲染的标签属性（比如直接在img的src属性中写~）、Razor代码块中会被解析为网站根路径，客户端运行的JavaScript无法识别该符号，会直接将~作为路径的一部分发起请求，导致资源404，显示占位图。
• 你尝试使用的../../wwwroot/images/xxx路径不符合静态文件访问规则：ASP.NET Core中wwwroot是静态资源的根目录，发布后浏览器无法直接访问wwwroot目录名，正确的访问路径直接从/images/开头即可。
• 尝试用Razor写JS逻辑属于混淆了服务端与客户端代码的运行边界：Razor代码在服务器执行，无法操作客户端的document对象，也不支持setInterval等客户端JS API，同时你编写的List定义、方法声明语法本身也存在错误。
• 最后一次修改中Console.WriteLine是C#服务端语法，JS中控制台输出为小写开头的console.log，语法错误导致JS代码中断执行，因此图片不再切换。

提供两种适配不同部署场景的修复方式：

方式1：网站部署在域名根目录 #

直接将JS数组中的图片路径修改为绝对路径，去掉~即可：

<img id="image" src="~/images/baseball.jpg">

<script type="text/javascript">
    const image = document.getElementById("image");
    let currentPos = 0;
    // 路径直接以/开头，对应wwwroot根目录
    const images = ["/images/baseball.jpg", "/images/basketball.jpg", "/images/football.jpg", "/images/soccer.jpg"];

    function changeimage() {
        currentPos = (currentPos + 1) % images.length;
        image.src = images[currentPos];
        // 调试时可打开注释，F12控制台查看当前加载的路径是否正确
        // console.log("加载图片路径：", image.src);
    }

    setInterval(changeimage, 3000);
</script>

方式2：网站部署在域名子应用 #

如果站点部署在域名的子路径下（比如https://xxx.com/myapp/），需要用Razor的Url.Content方法提前解析路径：

<img id="image" src="~/images/baseball.jpg">

<script type="text/javascript">
    const image = document.getElementById("image");
    let currentPos = 0;
    // 通过@Url.Content让服务端提前把~替换为正确的站点根路径
    const images = [
        "@Url.Content("~/images/baseball.jpg")",
        "@Url.Content("~/images/basketball.jpg")",
        "@Url.Content("~/images/football.jpg")",
        "@Url.Content("~/images/soccer.jpg")"
    ];

    function changeimage() {
        currentPos = (currentPos + 1) % images.length;
        image.src = images[currentPos];
    }

    setInterval(changeimage, 3000);
</script>

如果修改后仍有问题，按F12打开浏览器开发者工具，切换到「网络」面板，观察图片切换时的资源请求：如果返回404，对比请求的路径和实际图片的存放路径即可快速定位问题。

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