为什么我在客户端“加载资源失败”时出错？

Question

在我的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属性。

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

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.

Update2:我尝试了这条路径：

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

但我还是会犯以上的错误。为什么我得到错误的Failed to load resource和如何修复它？

Answer 1

tilda标志~可以在剃须刀视图中使用，以获得应用程序根路径。它不适用于css样式表文件。

当剃须刀执行视图时，如果它找到了~，它将被转换为应用程序根基路径。

只需使用没有~的路径

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

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

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

正如我前面提到的，相对于样式表的位置，图像位置是。如果硬编码视图/页面中的样式，它将相对于页面的url。因此，尽管请求yourSiteBaseUrl/工作，但yourSiteBaseUrl/Home/或yourSiteBaseUrl/Home/Index都不能工作，即使这2条路由返回相同的操作方法和视图/页面，也不能工作。所以我建议不要那样做。

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