CODEWITHSUNDEEP
javascriptreactjsgraphqlgatsby
Brent Arias
Brent Arias

Reputation: 30165

Gatsby Not Resolving GraphQL Image Address

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?

Upvotes: 1

Views: 825

Answers (1)

coreyward
coreyward

Reputation: 80041

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. E.g. if you add a file named sun.jpg to the static folder, it’ll be copied to public/sun.jpg

Upvotes: 4

Related Questions