代码之家 › 专栏 › 技术社区 › Santiago

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

yaml-front-matter styled-components gatsby markdown graphql

Santiago · 技术社区 · 6 年前

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

我正在为我的盖茨比网站的主页制作一个博客文章列表。
列表由“框”组成,链接到帖子的每个框都有一个背景图像。
我将这个背景图像传递给一个样式化组件,它从支柱我在main<div>元素中插入的值(您将看到下面的示例)。
它工作得很好 ,直到我尝试使用src下的本地文件夹中的图像(而不是使用简单地放置在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} 在主沙发上的一个道具上:

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

最后我叫它 img U背景 样式化组件中的道具:

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

这种方法有效。

现在,我想从我的“图像”文件夹,而不是从一个随机的网址获得图像。

我安装了 盖茨比评论图片
在gatsby-config.js上设置,并在frontmatter上设置一些图像的路径。
测试一切 http://localhost:8000/___graphql (和工作)

通过图形ql插入附加查询:

[...]
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为“空” . 我不知道还能做什么。

谢谢你的帮助。

0 回复 | 直到 6 年前

Derek Nguyen 6 年前

我认为有必要提供更多的信息来解决你的问题,你列出的所有事情本身都没有问题。然而,在盖茨比有太多的人被图像处理绊倒了,所以我正在写一份检查表。它本来是通用的,但我认为5、8、9、12号可能有助于你找到问题所在。

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

安装程序

有什么错误吗?有时盖茨比仍然会成功编译,尽管出了问题。检查控制台上有没有。。。红色。
你重新开始了吗 gatsby i、再打开再关闭?尝试删除缓存公用文件夹( .cache 和 public )如果你怀疑他们有问题。
是否列出了图像文件夹或其任何父文件夹 gatsby-source-filesystem ?
在你的眼前,是通往图像的道路 相对的 标记文件本身?i、路径以点开始 ./relative/path/to/image.png
所有降价都有 hero 前庭物质场?如果一个文件没有英雄字段,它将是 null .
如果frontmatter中的图像路径不是相对的或没有链接到文件,它将被视为常规字符串。

查询片段

你的查询有效吗?在中测试查询 http://localhost:8000/___graphql . 确保图像字段显示为文件节点。尝试一些简单的事情,比如

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

如果你的 英雄 显示为字符串,有问题,请再次检查设置。

你在用碎片吗?当前无法在graphiql工具中测试片段,因此可能需要找到该片段的定义并手动对其进行测试。以下是 the default ones that come with gatsby-transformer-sharp 以及他们的定义。
如果使用的是自定义片段,请确保将其定义并导出到某个位置。

用法

如果图像未显示在浏览器中,请检查并尝试查找在您的图像中显示的内容。
你在用 gatsby-image ? 如果是的话,请确保你传递了一些它可以使用的东西。
确保您的图像组件接收到它应该接收的内容。如果组件需要路径,则不要传入对象,如片段的结果。

一些旁注

gatsby-remark-images 仅处理标记图像&html中的相对链接 <img> ,所以如果你的图像生活在frontmatter中,它不会起任何作用。

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

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

安装程序

查询片段

用法

一些旁注

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