asp.net core tilde slash (~/) 不解析图像路径

Posted 2023-03-31

【中文标题】asp.net core tilde slash (~/) 不解析图像路径

【英文标题】：asp.net core tilde slash (~/) not resolving image path

【发布时间】：2017-08-05 21:38:43

【问题描述】：

我的 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" >
                <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>

【问题讨论】：

不能去掉波浪号吗？

@wazz 是的，我可以删除波浪号，但为什么剃须刀功能 ~/ 不能按预期工作？

对不起，我不太熟悉。样式是剃刀语法的一部分吗？我做了一些谷歌搜索，看起来风格可能很棘手。一个链接：***.com/questions/12351418/…。倒数第二个答案：***.com/questions/9821921/…

@wazz yes 使用@Url.Content() 确实有效。此样式不在 css 文件中。它在 html 文件中。我想我只会使用@Url.Content()，直到我找出发生这种情况的原因。谢谢

【参考方案1】：

@Url.Content() 和 Razor 代码中其他地方的波浪号 (~) 的使用将由 ASP.NET 转换为引用当前应用程序的根。

如果您直接在字符串表达式中使用波浪号，例如在background-image: url() 中，则它不会被 ASP.NET 解释（解析），因此在 HTML 或 CSS 中直接按原样显示那就是输出。这不起作用，因为 ~ 不是 HTML 或 CSS 的特性。

【参考方案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 了解详细信息，其中指出：

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