Gatsby 不解析 GraphQL 图像地址

Question

My project is based on the gatsby-creative starter. I am trying to add an Open Graph image meta property. Unfortunately, the address of the image in the source folder is not being translated into a proper content path. Here is what I did...

I started by adding a "url" and "image" properties to siteMetaData:

  siteMetadata: {
    title: `A Web Site`,
    description: `Yes, this is a web site.`,
    author: `Brent Arias`,
    url: `https://website.com`,
    image: `/images/snape.jpg`
  },

So far I'm doing the same thing as the online documentation . However, those instructions have a comment which states the above "image" property contains the Path to your image you placed in the 'static' folder . Huh? I don't believe I'm supposed to "place an image in the static folder"...I think that is Gatsby's job. But moving along...

Starting from this original seo.js file , I added the same "url" and "image" properties to the graphQL query:

  const { site } = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            title
            description
            author
            url
            image
          }
        }
      }
    `
  )

Seemingly, so far so good. Finally, in the same seo.js file, I added an entry for the image itself:

        {
          property: `og:type`,
          content: `website`,
        },
        {
          property: `og:url`,
          content: site.siteMetadata.url,
        },
        {
          property: `og:image`,
          content: `${site.siteMetadata.url}${site.siteMetadata.image}`
        },

When the page renders, the meta tag contains the useless address https://website.com/images/snape.jpg .

Yes the online documentation is not identical to this approach, but it seems to be the equivalent. I don't see why the address isn't being resolved to the "static" folder where the image should be found.

As a work-around hack, instead I added to the seo.js file the following:

import socialBanner from '../images/snape.jpg'

When I place that socialBanner into the "content" of that same "og:image" property, then it works as expected and resolves to: https://website.com/static/snape-119744a51329473845d08af3df4b5290.jpg .

I don't want that hack. What do I need to change to properly make use of Gatsby tools (StaticQuery, Helmet, etc) to handle this image and address?

Answer 1

The static folder being referenced by the Gatsby documentation is at the root of your project. Here's the documentation for the static folder and it's behavior in Gatsby .

If you want to use the approach shown in the SEO example documentation, you'll need to add your OpenGraph image to this folder, not to public/static , which is a folder that Gatsby uses for files that it generates.

Adding assets outside of the module system

You can create a folder named static at the root of your project. Every file you put into that folder will be copied into the public folder. Eg if you add a file named sun.jpg to the static folder, it'll be copied to public/sun.jpg