asp.net core tilde slash（〜/）不解析图像路径

Question

我的Index.cshtml视图中有一些标记，它具有内联css样式 background-image财产。呈现页面时，未生成图像的正确路径，并且波形符号保留在URL

中

HTML标记：                           

img标记上使用的路径在呈现页面时正常工作，但background-image属性中的路径显示如下并且找不到图像

呈现标记：

<article class="card-item card-item-colored" style="background-image:url(~/build/images/11.jpg);">
                <img class="card-item-pic" src="/build/images/11.jpg" alt="">
                <div class="card-item-hover">
                    <a href="#" class="btn btn-inverse-colored">View Demo</a>
                </div>
                <header class="card-item-caption">
                    <h4>Login Page</h4>
                </header>
            </article>

Answer 1

在@Url.Content()和Razor代码中的其他地方使用代字号（〜）将由ASP.NET翻译为引用当前应用程序的根目录。

如果直接在字符串表达式中使用代字号，例如在background-image: url()内，则不会被ASP.NET解释（解析），因此在HTML中直接显示 或输出的CSS。这不起作用，因为〜不是HTML或CSS的功能。

Answer 2

在样式属性中，url(...)是CSS函数而不是Razor方法。

在CSS url(...)函数中，使用正斜杠/而不是tilda ~来创建相对于网站根目录的URI：

<article style="background-image:url(/build/images/11.jpg);">

CSS 2.1规范在4.3.4 URLs and URIs部分中指定了这一点，并参考RFC 3986了解详情，其中说明：

  

以单个斜杠字符开头的相对引用称为绝对路径引用。