如何获得 WordPress Wesitelogo

Question

我是 Gatsby 的新手。所以，我想在 WordPress 管理中定义我的网站徽标。这是我的做法：

`import React from 'react';
import {graphql, StaticQuery} from 'gatsby';
import styled from 'styled-components';
import  Img  from  'gatsby-image';

    const SiteInfo = () => (
        <StaticQuery query={graphql`
        {
            file(name: {eq: "logo"}) {
                relativePath
                childImageSharp {
                  fluid {
                    originalImg
                  }
                }
            }
            site {
                siteMetadata {
                  title
                }
            }
        
        allFile(filter: {name: {eq: "logo"}}) {
            edges {
              node {
                name
                url
                relativePath
              }
            }
        }
        
        allWordpressWpMedia(filter: {title: {eq: "logo"}}) {
            edges {
              node {
                title
                source_url
              }
            }
          }
    }
      
      
    `
    } render = {data => (
        <BasicInfoWrapper>
            <Sitelogo>
                <Img src={data.allWordpressWpMedia.edges.node.source_url} alt="Logo" />
            </Sitelogo>
            <SiteTitle>
                {/*data.site.siteMetadata?.title || `Title`*/}
            </SiteTitle>

        </BasicInfoWrapper>
    )}/>
    );
    export default SiteInfo;

`

不幸的是它不起作用，我收到以下错误：TypeError:

`can't access property "source_url", data.allWordpressWpMedia.edges.node is undefined`

所以我求助于你，这样我才能成功

谢谢！

Answer 1

您需要输入嵌套的位置 edges，因为它是一个数组。

 <Img src={data.allWordpressWpMedia.edges[0].node.source_url} alt="Logo" />

但是，这将无法显示使用 gatsby-image 的图像。您应该使用原生 img 标签：

 <img src={data.allWordpressWpMedia.edges[0].node.source_url} alt="Logo" />

如果您想使用 gatsby-image，您需要使用片段或原始字段检索一些额外的数据。 gatsby-image 的理想查询应如下所示：

  query {
    file(relativePath: { eq: "blog/avatars/kyle-mathews.jpeg" }) {
      childImageSharp {
        fixed(width: 125, height: 125) {
          ...GatsbyImageSharpFixed
        }
      }
    }
  }

然后，您将能够：

export default ({ data }) => (
  <div>
    <h1>Hello gatsby-image</h1>
    <Img fixed={data.file.childImageSharp.fixed} />
  </div>
)

总而言之，您不能只使用 src 属性，因为 Gatsby 需要使用 transformers 和 sharps 来解析图像以处理图像并创建 GraphQL 节点模式。

您需要将您的查询转换为如下内容：

const allMedia = graphql`
  query {
    allWordpressWpMedia {
      edges {
        node {
          source_url
          localFile {
            publicURL
            childImageSharp {
              fluid(maxWidth: 800) {
                ...GatsbyImageSharpFluid
              }
            }
          }
        }
      }
    }
  }
`;

有关详细信息，请查看 this article。

如何获得 WordPress Wesitelogo

How to get WordPress Wesitelogo

javascript

graphql

gatsby

gatsby-image

gatsby-plugin