asp.net核心波浪号斜杠（〜/）无法解析图像路径 [英] asp.net core tilde slash (~/) not resolving image path

问题描述

我的Index.cshtml视图中有一些标记，该标记具有$ s $ c background-image 属性的内联css样式。呈现页面时，未生成图像的正确路径，并且波浪符号仍保留在url中

I have some markup in my Index.cshtml view, which has an inline css style with the background-image property. When the page is rendered the correct path of the image is not being generated and the tilde remains in the url

HTML标记：

HTML Markup:

在呈现页面时， img 标记上使用的路径可以正常工作，但是该路径在 background-image 属性中显示为，但找不到该图像

The path that is used on the img tag works properly when the page is rendered, but the path in the background-image property displays like this and the image is not found

渲染标记：

Rendered Markup:

<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>

推荐答案

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

Inside a style property, url(...) is a CSS function not a Razor method.

在CSS url（...）函数中，以正斜杠开头/ 而不是tilda 〜来创建相对于您网站根目录的URI：

In the CSS url(...) function, start with a forward slash / not a tilda ~ to make a URI relative to the root of your site:

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

CSS 2.1规范在 4.3.4 URL和URI ，并引用 RFC 3986 详细信息，其中指出：

The CSS 2.1 specification specifies this in section 4.3.4 URLs and URIs and refers to RFC 3986 for details, which states:

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

A relative reference that begins with a single slash character is termed an absolute-path reference.

这篇关于asp.net核心波浪号斜杠（〜/）无法解析图像路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！