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

问题描述

我的 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">查看演示</a>

<header class="card-item-caption"><h4>登录页面</h4></标题></文章>

解决方案

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

在 CSS url(...) 函数中，以正斜杠 / 而不是 tilda ~ 开头，以使 URI 相对到您网站的根目录:

CSS 2.1 规范在 4.3.4 URL 和 URI 并参考 RFC 3986 了解详情，其中指出:

<块引用>

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

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

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>

解决方案

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

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);">

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