Создание миниатюр изображений в уценке Гэтсби - PullRequest
Новая
       20

Создание миниатюр изображений в уценке Гэтсби

0 голосов
/ 06 марта 2020

Я следую этому учебнику, чтобы создавать эскизы для списка статей на моем сайте Гэтсби. Я успешно создал «избранные» изображения в моем src / templates / blog-post. js со следующим кодом 

import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"
import Img from "gatsby-image"

export default ({ data }) => {
  const post = data.markdownRemark
  let featuredImgFluid = post.frontmatter.featuredImage.childImageSharp.fluid
  return (
    <Layout>
      <div>
        <h1>{post.frontmatter.title}</h1>
        <h2>{post.frontmatter.author}</h2>
        <Img fluid={featuredImgFluid} />
        <div dangerouslySetInnerHTML={{ __html: post.html }} />
      </div>
    </Layout>
  )
}

export const query = graphql`
  query($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      html
      frontmatter {
        title
        author
        featuredImage {
          childImageSharp {
            fluid(maxWidth: 800) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  }
`

Я хотел переместить эти «избранные» изображения в свой индекс. js поэтому у меня может быть оглавление с заголовком, именем автора, датой и выдержкой, а также в src / pages / index. js

import React from "react"
import { Link, graphql } from "gatsby"
import Layout from "../components/layout"
import Img from "gatsby-image"

export default ({ data }) => {
  return (
    <Layout>
      <div>
        <h1>
          Amazing Pandas Eating Things
        </h1>
        <h4>{data.allMarkdownRemark.totalCount} Posts</h4>
        {data.allMarkdownRemark.edges.map(({ node }) => (
          <div key={node.id}>
            <Link to={node.fields.slug}>
              <h3>
                {node.frontmatter.title}{" "}by{" "}{node.frontmatter.author}{" "}
                <span>
                  — {node.frontmatter.date}
                </span>
              </h3>
              <Img fluid={node.frontmatter.featuredImage.childImageSharp.fluid} />
              <p>{node.excerpt}</p>
            </Link>
          </div>
        ))}
      </div>
    </Layout>
  )
}

//, limit: 6

export const query = graphql`
  query {
    allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
      totalCount
      edges {
        node {
          id
          frontmatter {
            title
            author
            date(formatString: "DD MMMM, YYYY")
            featuredImage {
              childImageSharp {
                fluid(maxWidth: 800) {
                  ...GatsbyImageSharpFluid
                }
              }
            }
          }
          fields {
            slug
          }
          excerpt
        }
      }
    }
  }
`

но я получаю:

TypeError: Невозможно прочитать свойство childImageSharp со значением NULL. Что я делаю не так?

Мой Github

1 Ответ

0 голосов
/ 08 марта 2020

Как и предполагалось, мне нужно было поле featuredImage во frontmatter всех файлов уценки, которые я запрашивал. Все 166 ...

...