1

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

  • 我正在为我的 Gatsby 网站的主页制作博客文章列表。

  • 该列表由“框”组成，链接到帖子的每个框都有一个背景图像。

  • 我将此背景图像传递给样式组件，它从我插入到主 < div > 元素中的道具值中获取图像（您将在下面找到示例）。

  • 它工作正常，直到我尝试使用 src 下本地文件夹中的图像（而不是使用我简单地放在 frontmatter 上的在线链接）。

这是我过去所做的工作：
我将图像的 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 属性：

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

这种方法有效。

现在我想从我的“图像”文件夹中获取图像，而不是从随机 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"。我不知道还能做什么。

谢谢您的帮助。

4

1 回答 1

2

我认为需要更多信息来解决您的问题，您列出的所有内容本身都没有错误。然而，很多人都被 gatsby 中的图像处理绊倒了，我正在写一个检查清单。它是通用的，但我认为 no.5、8、9、12 可能会帮助您找到问题所在。

将图像与gatsby-transformer-remark+gatsby-transformer-sharp故障排除一起使用

设置

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

查询和片段

  1. 你的查询有效吗？在http://localhost:8000/___graphql中测试您的查询。确保图像字段显示为文件节点。尝试一些简单的事情，比如
query {
  allMarkdownRemark {
    frontmatter {
      title
      hero {
        id
        name  <-- just enough to know the file exists
      }
    }
  }
}

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

  1. 你在使用碎片吗？目前无法在 graphiql 工具中测试片段，因此您可能需要找到该片段的定义并手动对其进行测试。这是随附的默认值gatsby-transformer-sharp及其定义的列表。

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

用法

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

一些旁注

  • gatsby-remark-images仅处理 markdown image & html 中的相对链接<img>，因此如果您的图像位于 frontmatter 中，则它不会做任何事情。
于 2019-02-18T06:12:27.763 回答