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查询中，它具有if (foundVerse) { return res.send(foundVerse.Text); } return res.status(404).send("No verse found.");，在您的React代码中，您正在node.featured_media

也许就是那个？

Answer 2

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

安装功能更好的图像插件，然后使用它。...

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

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

2 个答案: