盖茨比：通过frontmatter、GraphQl和样式化组件设置图像背景

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

我正在为我的盖茨比网站主页制作一个博客帖子列表。 列表由框组成，每个链接到帖子的框都有一个背景图像

我将这个背景图像传递给一个样式化组件，它从我插入主

元素的prop值中获取图像，您将看到下面的示例

它工作得很好，直到我尝试使用src下本地文件夹中的图像，而不是使用我简单地放在frontmatter上的在线链接

以下是我过去所做的工作： 我将图像的url放在降价文件的前面：

---
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}it插入到主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

这种方法有效

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

我安装了盖茨比评论图像 将其设置在gatsby-config.js上，并将某个图像的路径放在frontmatter上。 测试一切与工作 通过graphql插入附加查询：

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

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

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

盖茨比写得很好

但是我的主页完全是白色的。 浏览器的控制台显示node.frontmatter.hero为空。 我不知道还能做什么

---

谢谢您的帮助。

我认为需要更多的信息来解决您的问题，您列出的所有内容本身都没有错。然而，在《盖茨比》中有太多的人被图像处理绊倒了，我正在写一份检查表。这本应该是通用的，但我认为第5、8、9、12号可能会帮助你找到问题所在

使用图像与盖茨比变压器备注+盖茨比变压器尖锐故障排除 安装程序 有什么错误吗？有时，盖茨比仍然能够成功地编译，尽管出现了一些问题。检查控制台是否有任何。。。红色 你重新启动盖茨比了吗，也就是说，你又打开又关闭了它？尝试删除缓存和公用文件夹。如果怀疑缓存和公用文件夹有问题，请尝试删除它们。 您是否在gatsby源文件系统中列出了映像文件夹或其任何父文件夹？ 在frontmatter中，图像的路径是否相对于标记文件本身？i、 e路径以点开始。/relative/path/to/image.png 所有的降价都有英雄场吗？如果一个文件没有英雄字段，它将为空。 如果frontmatter中的图像路径不是相对的，或者没有链接到文件，它将被视为常规字符串。 查询和片段 你的查询有效吗？在中测试您的查询。确保图像字段显示为文件节点。尝试一些简单的方法，比如 如果您的英雄显示为字符串，则表示出现问题，请再次检查设置

你在用碎片吗？目前无法在graphiql工具中测试片段，因此您可能需要找到该片段的定义并手动进行测试。这是一个列表和它们的定义

如果您使用的是自定义片段，请确保在某处定义并导出它

用法 如果图像未显示在浏览器中，请检查并尝试查找显示在图像位置的内容。 你在用盖茨比的形象吗？如果是这样，请确保您传递的是它可以处理的内容。 确保图像组件接收到它应该接收的内容。如果您的组件需要一个路径，请不要传入对象，比如片段的结果。 一些旁注 盖茨比评论图片只处理markdown image&html中的相对链接，所以如果您的图片位于frontmatter中，它不会做任何事情。

---

非常感谢您的回答！我解决了问题，是5号！实际上，浏览器上的控制台讨论了空值问题。你们知道有并没有什么办法可以告诉盖茨比，只要简单一点，不要在并没有英雄的情况下摆出任何形象？很高兴这有帮助！当然，您至少可以在两个位置执行此操作：1您的样式化组件：背景：${{img}=>img | | fallbackImage.png}；b您的模板：{node.frontmatter.img&&}。您也可以修改gatsby-node.js或传入一个定制的frontmatter解析器，但这可能太多了，所以可以在一个已设置样式的组件上使用回退映像吗？背景图片：url${props=>props.img_background}| |'fallbackImage.png'；应该是好的吗？我将尝试这两种方法，因为我认为问题不在样式化组件上。事实上，第一种方法是在frontmatter上放置一个简单的图像链接，这没有问题，而且有效。当我开始查询一些childImageSharp{…}时，问题出现了。PS:gatsby-node.js的方式应该如何？我尝试了你建议的两种方法，但不幸的是控制台一直告诉我这是我尝试的第一种方法：background image:url${props=>props.img|u background | |'some random image online.jpg'}；不知怎的，页面呈现出来了，但是框中的所有内容都是白色的。这是第二种方法

---

d:嘿，圣地亚哥！对不起，我以为你的意思是使用后备映像，这有点不同。我今天晚了一点&我需要更多的咖啡。您需要检查node.frontmatter.hero是否为null-如果该字段丢失，尝试访问childImageSharp将抛出错误。另外，您的jsx语法似乎有点错误-您必须在元素标记之间执行nullcheck，如{node.frontmatter.hero&}。请随意提出一个新问题，我相信很多人都可以通过react.js标签来帮助您！

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

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