Question

查看Gatsby文档，他们建议您可以像在其他任何地方一样引用背景图片：

.image {
  background-image: url(./image.png);
}

这些图像不应该包含在其中。我尝试将图像目录放置在src文件夹，布局文件夹和根文件夹中，但是仍然出现错误：

Loader /Users/username/Sites/my-app/node_modules/url/url.js?{"limit":10000,"name":"static/[name].[hash:8].[ext]"} didn't return a function
 @ ./~/css-loader!./~/postcss-loader!./src/layouts/index.css 6:400-435

使用Gatsby引用背景图像的正确方法是什么？

当前目录结构：

my-app
- src
-- images 
--- image.png
-- layouts
--- index.css

Answer 1

通常，我将特定于组件的图像以及它们的JSX和CSS文件以及常规/全局图像保存在images文件夹中，因此我可能具有这样的结构：

.
├── components
│   ├── button.jsx
│   ├── button.module.scss
│   └── button_icon.png
└── images
    └── logo.png

要引用button_icon.png中的button.module.css，我会这样做：

background-image: url("./button_icon.png");

要引用logo.png中的button.module.css，我会这样做：

background-image: url("../images/logo.png");

Answer 2

您将需要一个静态文件夹，其中包含项目中src文件夹之外的图像。

基本上会

my-app 
- src
-- components
--- styles.scss
- static
-- images
--- image.png

要访问您的styles.css或scss中的图像，只需执行此操作

background: url('/images/image.png');

或者您可以通过从gatsby导入withPrefix来访问jsx / js文件之一中的图像

import { withPrefix } from 'gatsby';
<div style={{ backgroundImage: `url(${withPrefix('/images/image.png')})` }} />

Answer 3

请确保您定义了正确的路径，并且该路径是相对于CSS文件所在位置的相对路径，因此该路径取决于您的文件结构。可能类似于background-image: url('../../imageAssets/coolImages/background.png');

盖茨比：使用CSS

3 个答案: