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>

背景图像消失，我在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')">

但我还是得到了上面的错误。

---

为什么加载资源时出现错误

失败以及如何修复它？
可以在razor视图中使用tilda符号
~
，以获取应用程序根路径。它不适用于css样式表文件

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

只需使用不带
~

 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
都不起作用，即使这两条路由返回相同的操作方法和视图/页面。所以我建议不要这样做

将定义移动到css文件，并使用正确的相对路径到达图像位置。然后它将适用于
yourSiteBaseUrl/Home/Index
和
yourSiteBaseUrl/Home
和
yourSiteBaseUrl
为什么
~/code>而不是
？只需使用`这一点的意思是什么？
表示当前位置请看，我还是得到了相同的错误。你的意思是什么？@Michael
表示当前文件夹，
表示父文件夹folder@Michael查看您的控制台并检查通过在图像上悬停获得的路径，您将看到使用的绝对路径，如我在回答中提到的，图像位置与样式表文件的位置相对。如果在视图/页面中硬编码样式，它将与页面相关。因此，尽管
yourSiteBase/Home/
有效，
yourSiteBase/Home/Index
无效，即使两条路由返回相同的视图/页面。所以我建议不要这样做。将其移动到css文件中。
.someCssClass {
     background-image: url('./assets/images/shutterstoc/img1.jpg'); 
}