就像本教程在 Markdown 帖子和页面中使用图像一样;我正在尝试将博客文章的图片从我的 markdown(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
}
}
}
}
}
}
`
但我不断收到这个错误。
错误:元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件),但得到:未定义。
我的 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-node
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
})
})
}