MVC中OAuth可点击动态生成图片的路径错误排查

我来帮你搞定这个路径解析的坑！你的问题出在ASP.NET虚拟路径~没有被正确解析——浏览器根本不认识~这个标识，它会把它当成当前页面路由的一部分，所以才会生成https://localhost:44335/Accounts/~/images/icons/Facebook.gif这种错误路径。

下面给你两种靠谱的解决方案：

方案1：用Url.Content()解析虚拟路径（推荐） #

这是ASP.NET处理虚拟路径的标准方式，它会自动把~转换成应用的根路径，不管你的应用部署在根目录还是子目录都能正常工作。修改你的代码如下：

@foreach (var provider in loginProviders) {
    // 用Url.Content解析虚拟路径
    var iconPath = Url.Content($"~/images/icons/{provider.Name}.gif");
    <button type="submit" class="btn btn-default" name="provider" value="@provider.Name" title="Log in using your @provider.DisplayName account">@provider.Name</button>
    <img src="@iconPath" alt="@provider.DisplayName login icon" />
}

你也可以直接把解析逻辑写到img标签的src属性里，省掉变量：

<img src="@Url.Content($"~/images/icons/{provider.Name}.gif")" alt="@provider.DisplayName login icon" />

方案2：直接使用根相对路径 #

如果你的应用肯定部署在域名根目录下，也可以直接用/开头的路径，跳过~的解析：

@foreach (var provider in loginProviders) {
    var iconPath = $"/images/icons/{provider.Name}.gif";
    <button type="submit" class="btn btn-default" name="provider" value="@provider.Name" title="Log in using your @provider.DisplayName account">@provider.Name</button>
    <img src="@iconPath" alt="@provider.DisplayName login icon" />
}

不过这种方式的局限性是，如果以后你的应用部署在子目录（比如https://example.com/myapp/），路径就会失效，所以还是优先推荐方案1。

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