Изображения в уценке не загружаются в шаблон в gatsbyjs - PullRequest
Новая
       41

Изображения в уценке не загружаются в шаблон в gatsbyjs

0 голосов
/ 12 апреля 2020

Как в этом уроке Работа с изображениями в сообщениях и страницах разметки ; Я пытаюсь загрузить изображение поста блога из моей уценки (frontmatter) в заголовок моего шаблона 

featuredImage: "../images/hiplife.jpg"

Мой компонент шаблона выглядит следующим образом: 

import React from "react"
import { graphql } from "gatsby"
import { Img } from "gatsby-image"
import Layout from "../../components/layout/layout"
import Navbar from "../../components/navbar/navbar"
import styles from "./blogposts.module.css"
import kasahare from "../../images/pwd.png"

export default ({ data }) => {
  let post = data.markdownRemark
  let featuredImgFluid = post.frontmatter.featuredImage.childImageSharp.fluid
  return (
    <Layout>
      <Navbar />
      <div className={styles.Header}>
        <Img fluid={featuredImgFluid} />
      </div>

      <div className={styles.BlogPosts}>
        <div className={styles.BlogPostsHolder}>
          <div className={styles.authorside}>
            <div className={styles.author}>
              <div>
                <img className={styles.authorImg} src={kasahare} alt="Logo" />
              </div>
              <div>{post.author}</div>
              <div>{post.date}</div>
              <div className={styles.tag}>{post.tag}</div>
            </div>
          </div>
          <div
            className={styles.blogpostcontent}
            dangerouslySetInnerHTML={{ __html: data.markdownRemark.html }}
          />
        </div>
      </div>
    </Layout>
  )
}

export const pageQuery = graphql`
  query($path: String!) {
    markdownRemark(frontmatter: { path: { eq: $path } }) {
      html
      frontmatter {
        date(formatString: "MMMM DD, YYYY")
        author
        title
        tag
        featuredImage {
          childImageSharp {
            fluid(maxWidth: 1050) {
              base64
              aspectRatio
              src
              srcSet
              sizes
            }
          }
        }
      }
    }
  }
`

Но я продолжаю получать эту ошибку .

Ошибка: недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: undefined.

Мой gatsby-config выглядит как 

module.exports = {
  /* Your site config here */
  siteMetadata: {
    title: "HipLife",
    description: "The blog for hiplife culture",
    author: "kaf",
  },
  plugins: [
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
    `gatsby-transformer-remark`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `markdown`,
        path: `${__dirname}/src/markdown`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images/`,
      },
    },
  ],
}

И мой gatsby-узел 

const path = require(`path`)

exports.createPages = async ({ actions, graphql, reporter }) => {
  const { createPage } = actions

  const blogPostTemplate = path.resolve(`src/templates/blogposts/blogposts.js`)

  const result = await graphql(`
    {
      allMarkdownRemark(
        sort: { order: DESC, fields: [frontmatter___date] }
        limit: 1000
      ) {
        edges {
          node {
            frontmatter {
              path
            }
          }
        }
      }
    }
  `)

  // Handle errors
  if (result.errors) {
    reporter.panicOnBuild(`Error while running GraphQL query.`)
    return
  }

  result.data.allMarkdownRemark.edges.forEach(({ node }) => {
    createPage({
      path: node.frontmatter.path,
      component: blogPostTemplate,
      context: {}, // additional data can be passed via context
    })
  })
}

1 Ответ

0 голосов
/ 21 апреля 2020

Обнаружил, что у меня есть фигурные скобки вокруг моего импорта изображений Гэтсби import { Img } from "gatsby-image"

Удаление их заставило его работать. Спасибо

...