CSS URL 中的图像未显示在 GatsbyJS 中

Question

我在 css/application.scss 中有以下选择器：

#header-container {
  background: #333 url('../pages/images/home-head.jpg') center center no-repeat;
  background-size: cover;
}

当我使用 gatsby develop 预览网站时，我在网络检查器中看到了这个：

#header-container {
  background: #333 url([object Object]) center center no-repeat;
  background-size: cover;
}

[object Object] 肯定有问题，但我无法找到它。关于我应该看哪里的任何提示？

Answer 1

问题出在 Gatsby doesn't (yet) include loaders for images so you need to manually add that. See this issue for more background on this https://github.com/gatsbyjs/gatsby/issues/287.

Images in CSS URLs not showing in GatsbyJS