Gatsby：通过 frontmatter、GraphQl 和 Styled-components 设置图像背景

Question

我知道这个问题听起来有点复杂，但事实并非如此。
我会尽力用简单的方式解释它：

我正在为我的 Gatsby 网站的主页制作一个博客列表 post。
列表由 "boxes" 组成，link 到 post 的每个框都有一个背景图像。
我将这个背景图像传递给样式化组件，它从我插入主 <[=101 中的 prop 值获取图像=] > 元素（您将在下面找到示例）。
它工作正常，直到我尝试使用 src 下本地文件夹中的图像（而不是使用我只是简单地使用的在线 link放在前面）。

这是我过去所做的工作：
我把图片的url放在markdown文件的frontmatter上：

---
slug: "/post/my-post"
 [...]
imghero: "https:/path/to/image-online.jpg" 
---

然后用graphql查询：

const LISTING_QUERY = graphql`
        query BlogPostListing {
            allMarkdownRemark(limit: 10, sort: {
                order: DESC,
                fields: [frontmatter___date]
            }) {
            edges {
                node {
                excerpt
                frontmatter {
                    title
                    slug
                    date(formatString: "MMMM DD, YYYY")
                    imghero
                }
                }
            }
            }
        }
`

之后，我将 {node.frontmatter.imghero} 插入主 div 的道具上：

const Listing = () => (
    <StaticQuery 
        query={LISTING_QUERY} 
        render={({allMarkdownRemark}) => ( 
            allMarkdownRemark.edges.map(({node}) => (
                <Article img_background={node.frontmatter.imghero} key={node.frontmatter.slug}>
                [... etc ...]
                </Article>
            ))
        )}
    />
)

export default Listing

最后我在 styled-component 中调用 img_background prop:

const Article = styled.article`
    background-image: url(${props => props.img_background};);
    [... etc ...]
`

这个方法有效。

现在我想从我的 "images" 文件夹中获取图像，而不是从随机 url 中获取图像。

我安装了gatsby-remark-images
将它设置在 gatsby-config.js 并将一些图像的路径放在 frontmatter 上。
使用 http://localhost:8000/___graphql 测试所有内容（并且有效）

通过 graphql 插入附加查询：

[...]
frontmatter {
date(formatString: "DD MMMM, YYYY")
title
imghero
hero {
    childImageSharp{
        fluid(maxWidth: 630) {
            ...GatsbyImageSharpFluid
        }
    }
}
[...]

我用新路径修改组件上的节点：

<Article img_background={node.frontmatter.hero.childImageSharp.fluid} [...]> 
    [...] 
</Article>

Gatsby Develop 编译正常。

可是后来我的主页全白了
并且浏览器的控制台显示 node.frontmatter.hero 是 "null"。我不知道还能做什么。

感谢您的帮助。

Answer 1

我认为需要更多信息才能解决您的问题，none 您列出的内容本身看起来是错误的。然而，很多人都被 gatsby 中的图像处理绊倒了，所以我正在写一个清单。本来是通用的，不过我觉得5、8、9、12可以帮你定位问题。

使用图像 `gatsby-transformer-remark` + `gatsby-transformer-sharp` 故障排除

设置

有没有错误？有时 gatsby 仍然可以成功编译，尽管出现了问题。检查控制台是否有任何...红色的东西。
您是否重新启动 gatsby 即再次打开和关闭它？如果您怀疑它们有问题，请尝试删除缓存和 public 文件夹（.cache 和 public）。
您是否在 gatsby-source-filesystem 中列出了您的图像文件夹或其任何父文件夹？
在您的 frontmatter 中，图像的路径是否 相对于 markdown 文件本身？即路径以点 ./relative/path/to/image.png
是否所有的 markdown 在 frontmatter 中都有一个 hero 字段？如果文件没有 hero 字段，它将是 null.
如果 frontmatter 中的图像路径不是相对的或 link 文件，它将被视为常规字符串。

查询和片段

您的查询有效吗？在 http://localhost:8000/___graphql 中测试您的查询。确保图像字段显示为文件节点。尝试一些简单的东西，比如

query {
  allMarkdownRemark {
    frontmatter {
      title
      hero {
        id
        name  <-- just enough to know the file exists
      }
    }
  }
}

如果您的 hero 显示为字符串，则说明有问题，请再次检查设置。

你在使用片段吗？目前无法在 graphiql 工具中测试片段，因此您可能需要找到该片段的定义并手动测试它。这是 the default ones that come with gatsby-transformer-sharp 及其定义的列表。
如果您使用的是自定义片段，请确保在某处定义并导出它。

用法

如果图像未在浏览器中显示，请检查并尝试找到显示的内容来代替您的图像。
您在使用 gatsby-image 吗？如果是这样，请确保您传递的是它可以使用的东西。
确保您的图像组件接收到它应该接收的信息。如果您的组件需要路径，请不要传入对象，例如片段的结果。

一些旁注

gatsby-remark-images 仅处理降价图像中的相对 links & html <img>，因此如果您的图像位于 frontmatter，它不会做任何事情。

Gatsby：通过 frontmatter、GraphQl 和 Styled-components 设置图像背景

Gatsby: set an image background through frontmatter, GraphQl and Styled-components

markdown

yaml-front-matter

graphql

gatsby

styled-components

使用图像 `gatsby-transformer-remark` + `gatsby-transformer-sharp` 故障排除

设置

查询和片段

用法

一些旁注

Gatsby：通过 frontmatter、GraphQl 和 Styled-components 设置图像背景

Gatsby: set an image background through frontmatter, GraphQl and Styled-components

markdown

yaml-front-matter

graphql

gatsby

styled-components

使用图像 gatsby-transformer-remark + gatsby-transformer-sharp 故障排除

设置

查询和片段

用法

一些旁注

使用图像 `gatsby-transformer-remark` + `gatsby-transformer-sharp` 故障排除