将图像从Wordpress导入GatsbyJS V2时出错

Question

我是Gatsby和React的新手，我似乎不知道如何使用Gatsby Sharp和Wordpress源插件显示图像。

使用教程和示例代码上的设置，我的设置中有这个。

在我的gatsby-config.js:上

    module.exports = {
  siteMetadata: {
    title: 'Gatsby Default Starter',
  },
  plugins: [
    'gatsby-plugin-react-helmet',
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    {
      resolve: `gatsby-source-wordpress`,
      options: {
        /*
        * The base URL of the WordPress site without the trailingslash and the protocol. This is required.
        * Example : 'gatsbyjswpexample.wordpress.com' or 'www.example-site.com'
        */
        baseUrl: `MYWORDPRESSSITE`,
        // The protocol. This can be http or https.
        protocol: `http`,
        // Indicates whether the site is hosted on wordpress.com.
        // If false, then the asumption is made that the site is self hosted.
        // If true, then the plugin will source its content on wordpress.com using the JSON REST API V2.
        // If your site is hosted on wordpress.org, then set this to false.
        hostingWPCOM: false,
        // If useACF is true, then the source plugin will try to import the WordPress ACF Plugin contents.
        // This feature is untested for sites hosted on WordPress.com
        useACF: true,
      },
    },
    'gatsby-transformer-sharp',
    'gatsby-plugin-sharp',
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: 'gatsby-starter-default',
        short_name: 'starter',
        start_url: '/',
        background_color: '#663399',
        theme_color: '#663399',
        display: 'minimal-ui',
        icon: 'src/images/gatsby-icon.png', // This path is relative to the root of the site.
      },
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.app/offline
    // 'gatsby-plugin-offline',
  ],
}

这是我的问题：

export const pageQuery = graphql`
query {
  allWordpressPost{
    edges {
      node {
        id
        slug
        title
        content
        excerpt
        date
        modified
        featured_media {
          localFile {
            childImageSharp {
              fluid(maxHeight: 300) {
                base64
                tracedSVG
                aspectRatio
                src
                srcSet
                srcWebp
                srcSetWebp
                sizes
                originalImg
                originalName
              }
            }
          }
        }
      }
    }
  }
}`

并使用以下内容将图像添加到我的索引中：

const IndexPage = ({data}) => (
  <Layout>
    {data.allWordpressPost.edges.map(({ node }) => (
            <Img fluid={node.featured_image.localFile.childImageSharp.fluid} />
              <h2 className="mt0">{node.title}</h2>
              <p className="measure blogpost" dangerouslySetInnerHTML={{ __html: node.content }}></p>
    ))}
  </Layout>
)

在开发模式下，我收到一个空白页面，当我试图构建它时，我会收到一个错误。

WebpackError: TypeError: Cannot read property 'localFile' of undefined

我不确定我现在缺少了什么，因为我可以在我的graphql上看到localFile，但我希望有人能给我指明正确的方向。

Answer 1

在GraphQL查询中，它有node.featured_media，而在React代码中，您正在执行node.featured_image

也许是那个？？

Answer 2

Wordpress在REST API中的功能图像存在权限问题。我在Github上发表了一篇关于这个的文章。https://github.com/gatsbyjs/gatsby/issues/23458

安装Better Featured Image插件，然后使用此。。。。

allWordpressPost {
      edges {
        node {
          better_featured_image {
            source_url
          }
        }
      }
    }