html - 为什么在客户端上出现错误“无法加载资源”？

我在index.cshtml页面中有此元素：

 <section class="parallax parallax-2 padding-xxs" style="background-image: url('mySiteName/assets/images/shutterstoc/img1.jpg');">
     <div>some content </div>
</section>

如您所见，我具有样式属性。

如果我将样式属性更改为此：

style="background-image: url('~/assets/images/shutterstoc/img1.jpg');"

背景图片消失了，并且在Web控制台中出现此错误：

Failed to load resource: the server responded with a status of 404 (Not Found)  img1.jpg

**更新*

The path to the image is:
http://localhost/assets/images/shutterstoc/img1.jpg
As you can see the mySiteName is missing.

更新2：
我尝试以下路径：

<section class="parallax parallax-2 padding-xxs" style="background-image: url('./assets/images/img1.jpg')">

但是上面我仍然出错。
为什么会出现错误Failed to load resource以及如何解决？

最佳答案

tilda符号~可以在剃刀视图中使用，以获取应用程序的根路径。它不适用于css样式表文件。

当razor执行视图时，如果找到~，它将被转换为应用程序根目录基本路径。

只需使用没有~的路径

 background-image: url('./assets/images/shutterstoc/img1.jpg');

图片网址是相对于样式表的。因此，根据样式表和资产目录的位置，根据需要将前缀.调整为../。

.someCssClass {
     background-image: url('./assets/images/shutterstoc/img1.jpg');
}

就像我上面提到的那样，图像位置是相对于样式表的位置的。如果您在视图/页面中对样式进行硬编码，则它将相对于页面的URL。因此，尽管请求yourSiteBaseUrl/有效，但即使这两个路由返回相同的操作方法和视图/页面，yourSiteBaseUrl/Home/或yourSiteBaseUrl/Home/Index也不起作用。所以我建议不要这样做。

将定义移动到css文件，并在其中使用正确的相对路径以放置图像位置。然后它将适用于yourSiteBaseUrl/Home/Index和yourSiteBaseUrl/Home和yourSiteBaseUrl