Question

我有一个带背景图片的简单自定义布局（PaintLayout.cshtml）：

<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    <link href="/Content/PaintStyles.css" rel="stylesheet" type="text/css" /> 
</head> 
<body style="background: url('Images/PaintBackgroundSM.png')">
    <div id="header">
        <h1>@ViewBag.Headline</h1>
    </div>

    <div>
        @RenderBody()
    </div> 
</body>

Index.cshtml显示图像很好

@{
Layout = "~/Views/Shared/PaintLayout.cshtml";
}

<div style="text-align:center">
    <h1>@ViewBag.Message</h1>
</div>

但是View没有。然而，它确实从PaintStyles.css获得了其余的css，而不是布局中的图像

@{
Layout = "~/Views/Shared/PaintLayout.cshtml";
}

<div>
    <h2>ShowDetail</h2>
</div>

我在图像的路径上尝试了几种变体。我正在使用的是唯一一个甚至可以在Index.cshtml上运行的。我的图像文件夹位于根目录中，模板放置在该目录中。我的索引和视图都在Views \ Paint下的相同路径中。

Answer 1

您需要使用可在应用程序中的任何位置解析的路径：

/foo/bar/image.jpg
// example.com/foo/bar/image.jpg
http://example.com/foo/bar/image.jpg
请注意，~/前缀在没有additional code的内联样式中不起作用。

或（更简单，更清晰）将路径放入样式表中，以便解析relative to the stylesheet。

body{
    /* use a path relative to the stylesheet's location */
    background: url('../Images/PaintBackgroundSM.png')
}

在布局中共享具有不同视图的背景图像

1 个答案: