Html 使用带Gulp的Sass的背景图像路径

我的背景图像没有加载！ 我搜索stackoverflow寻找解决方案，但我找到的东西并没有解决我的具体问题

我使用GULP作为构建工具，GULP SASS编译器用于SASS编译，GULP BROWSER-SYNC用作testserver

我的html

<section class="img_header">
 <div class="text_img_header_centered">
  <h1>blabla</h1> 
  <h2>blablablabla</h2>
</div>
</section>

这是我的文件结构。css文件夹中的main.css。img中的blabla.jpg（如图所示）。My main.scss在dev文件夹中。网站还没有上线。但背景图像未加载！。有什么想法吗？此项目中只包含一个css文件。所有其他属性都可以正常工作

---

谢谢你的帮助：）

我看不太清楚缩进，但我想是这样的

.img_header {
  background-image: url('../../../assets/img/flugzeug_375x667.jpg');
}

---

将来，您应该尝试使用公共文件夹，并使用类似Webpack的东西将其合并到构建中。如果您的文件是通过Internet提供的，您也可以使用绝对路径。

这可能是路径问题。但是在我们帮助你之前，我们需要更多地了解这个项目。您是否正在使用Webpack之类的构建工具？您使用什么将SCS处理为CSS？所有这些东西都会对路径产生影响。此外，您还需要一个运行的Web服务器来使用

/

作为根目录。你的文件系统不知道那是什么。请记住，CSS中的路径是相对于读取文件的页面的，而不是相对于CSS文件本身的。简单地删除第一个/可能会解决问题，但我不知道你的HTML文件相对于网站根的位置。嘿，伙计们，谢谢你们的回复。伟大的社区。我会更精确一些。我使用gulp作为构建工具。我的SCSS编译器是Gulp Sass。我正在使用gulp工具浏览器同步。My index.html（需要图片）位于站点文件夹的根目录中，与资产文件夹位于同一层。（请查看主线程中我的图片9“文件结构”，以查看有关整个文件结构的信息）。我想使用背景图像作为覆盖一个屏幕大小的标题，我想使用背景图像功能用图片覆盖容器。谢谢，伙计们。嘿，谢谢你们的回复。我正在使用Gulp和工具Gulp Sass和浏览器同步（作为测试服务器）。我编辑了帖子，以便更准确地解释我的问题。我还写了一篇评论，如上所述。不幸的是，我仍然找不到解决方案：（@Marquedeluxe这只是一个观点，但Gulp有点过时。如果你正在构建React应用程序，你应该尝试转移到另一个捆绑包，如Webpack或CRA。谢谢你的请求。你知道一个关于如何开始使用Webpack的好教程吗？因为我对这些东西没有太多经验。但我还是想知道为什么我的背景不好rk.发现错误。这是因为容器的高度有问题。div刚刚崩溃，因为里面没有内容：-/。现在我设置了一个高度：100 vh，图像显示得很好。@marquedeluxe lol作为将来的参考，您可以使用开发工具查看它是否加载在网络选项卡下，或者您可以将鼠标悬停在元素选项卡，它应该弹出（铬）。

.img_header {
  background-image: url('../../../assets/img/flugzeug_375x667.jpg');
}