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

【问题标题】：Error on importing images from Wordpress to GatsbyJS V2将图像从 Wordpress 导入 GatsbyJS V2 时出错
【发布时间】：2019-04-17 07:34:02
【问题描述】：

我是 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，但我希望有人能指出我正确的方向。

【问题讨论】：

标签： wordpress reactjs gatsby

【解决方案1】：

在 GraphQL 查询中它有 node.featured_media 而在你的 React 代码中你正在做 node.featured_image

也许是那个？？

【讨论】：

【解决方案2】：

Wordpress 的 REST API 中的特色图片存在权限问题。我为此做了一个 Github 问题。 https://github.com/gatsbyjs/gatsby/issues/23458

安装更好的特色图片插件，然后使用它....

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

【讨论】：