ASP.NET Core 7 Razor中JS如何正确访问wwwroot下的图片？

问题核心在于Razor的~路径语法仅能在服务器端解析，而JavaScript运行在客户端，无法识别~符号，导致浏览器将其当作相对路径的一部分拼接，最终请求了错误的Account/Login/~/1.png路径。

以下是两种可靠的解决方式：

方法一：通过Razor注入网站根路径 #

在_Layout.cshtml中，先用Razor生成网站根路径，再在JavaScript中复用这个路径拼接图片地址：

<img id="landing_page_image" src="~/0.png" alt="Login" style="height: 100%; width:100%"/>
<script type="text/javascript">
    // 用Razor解析网站根路径，注入到JS变量中
    const siteRoot = '@Url.Content("~/")';
    
    setInterval(function() {
        let img = document.getElementById('landing_page_image');
        // 用根路径拼接图片文件名
        img.src = `${siteRoot}${Math.round(Math.random())}.png`;
    }, 6000);
</script>

@Url.Content("~/")会在服务器端自动解析为网站的根URL（比如部署在根目录时是/，部署在子应用时是/your-app/），确保JS生成的路径始终指向wwwroot下的资源。

方法二：直接使用绝对路径前缀 #

如果确定网站始终部署在根目录，也可以直接用/作为路径前缀，wwwroot下的资源可通过/文件名直接访问：

<script type="text/javascript">
    setInterval(function() {
        let img = document.getElementById('landing_page_image');
        img.src = `/${Math.round(Math.random())}.png`;
    }, 6000);
</script>

这种方式更简洁，但不适用于网站部署在子目录的场景，推荐优先使用方法一。

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