Which images are fetched and processed by Gatsby?

[doingandlearning]

What I expected? All images that are queried over graphQL and then referenced in my components and code would be fetched and stored locally. There would be no references to images in the WP file-system.

What I found This was true for some images but not all.

Images referenced like this are maintaining the URL to the WP file-system.

                <div
                  className="h-screen bg-cover bg-center "
                  style={{
                    backgroundImage: `url(${slide?.backgroundImage?.mediaItemUrl})`,
                  }}
                ></div>

Images using the browser img tag are still referencing the WP file-system

                          <img
                            width="100"
                            src={logo.mediaItemUrl}
                            alt=""
                          />

Questions I read somewhere that inline images weren't being parsed by this plugin and so tried using gatsby-wordpress-experimental-inline-images. If this should be working then I can raise an issue on their repo.

Should I be using the Gatsby <Img /> component? Will that automatically fetch and process the remote images?

Setup Relevant plugins:

{
    "gatsby": "^2.25.3",
    "gatsby-image": "^2.4.21",
    "gatsby-plugin-postcss": "^2.3.13",
    "gatsby-plugin-react-svg": "^3.0.0",
    "gatsby-plugin-sharp": "^2.7.1",
    "gatsby-source-filesystem": "^2.4.2",
    "gatsby-source-wordpress-experimental": "^2.1.0",
    "gatsby-transformer-sharp": "^2.5.21",
    "gatsby-wordpress-experimental-inline-images": "^0.0.3"
}

Relevant gatsby-config setup:

module.exports = {
  plugins: [
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-source-wordpress-experimental`,
      options: {
        url: process.env.WPGRAPHQL_URL`,
        baseUrl: "something.local",
        verbose: true,
        develop: {
          hardCacheMediaFiles: true,
        },
        debug: {
          graphql: {
            writeQueriesToDisk: true,
          },
        },
        type: {
          Post: {
            limit: process.env.NODE_ENV === `development` ? 50 : 5000,
          },
        },
        html: {
          createStaticFiles: true
        },
        plugins: [
          {
            resolve: `@draftbox-co/gatsby-wordpress-inline-images`,
            options: {
              baseUrl: `something.local`,
              protocol: `http`
            }
          }
        ]
      },
    },
    `gatsby-transformer-sharp`,
    {
      resolve: "gatsby-plugin-react-svg",
      options: {
        rule: {
          include: /\.inline\.svg$/,
        },
      },
    },
    "gatsby-plugin-postcss",
  ],
};

Appreciate any thoughts on this.

[s60v5]

For me all inline images are being parsed and converted into Gatsby Image format without using gatsby-wordpress-experimental-inline-images (I have only gatsby-source-wordpress-experimental installed). So looks like gatsby-source-wordpress-experimental is able to convert article images into Gatsby <Img> out of the box. But the strange thing is, even though the inline images are being fetched and processed by Gatsby, they are not being lazyloaded nor deferred, also they are not being converted into webp format.

[doingandlearning]

Interesting @dawgor - thanks for that!

Are you using any images in the CSS like I am with the background-image?

If you are, I'd be curious to see your config to see if there are any differences.

Also, I'm querying the graphQL endpoint in createPages and passing this data down to pages and components in Context. Is this similar to your approach or are you querying the data in the component/page?

[s60v5]

I am not using background-image images within wordpress content field sorry, only the standard html img format: <img src="" />. These can be processed by gatsby-source-wordpress-experimental out of the box I believe, so I didn't have to make any customizations to my config:

plugins: [
    {
      /**
       * First up is the WordPress source plugin that connects Gatsby
       * to your WordPress site.
       *
       * visit the plugin docs to learn more
       * https://github.com/gatsbyjs/gatsby-source-wordpress-experimental/blob/master/README.md
       *
       */
      resolve: `gatsby-source-wordpress-experimental`,
      options: {
        // the only required plugin option for WordPress is the GraphQL url.
        url: process.env.WPGRAPHQL_URL,
      },
    },
    `gatsby-plugin-preact`,
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-plugin-react-svg`,
      options: {
        rule: {
          include: /images/,
        },
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sass`,
    {
      resolve: `gatsby-plugin-google-fonts-with-attributes`,
      options: {
        fonts: [`source sans pro\:400`, `lora\:400`],
        display: "swap",
        attributes: {
          rel: "stylesheet preload prefetch",
        },
      },
    },
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#ffffff`,
        theme_color: `#cb0000`,
        display: `minimal-ui`,
        icon: `static/img/favicon.svg`, // 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.dev/offline
    // `gatsby-plugin-offline`,
  ],

Also, I'm querying the graphQL endpoint in createPages and passing this data down to pages and components in Context. Is this similar to your approach or are you querying the data in the component/page?

Yes, I am querying the data in the exact same way.

By the way, seems like this plugin has a hardcoded loading: "eager" option for processing inline images, also it does not pass the "webp" value, thus inline images are not being lazyloaded or converted to webp format.

Edit:

I think I've misunderstood you sorry. So for images that you load on frontend (for instance in a gatsby template), you should use gatsby Img component (not the standard img src) and feed them with a fluid image, not an URL. And your query shoud look like this:

localFile {
  publicURL
  childImageSharp {
    fluid(maxWidth: 800) {
      ...GatsbyImageSharpFluid
    }
  }
}

[hashinteractive]

It seems that there are some inconsistencies here as my images in WordPress blocks are not not being converted to gatsby <Img> components as described in the documentation

Media items in html are automatically sourced and image tags are swapped with gatsby-image's

Also, I don't know if it's how the post's content is rendered but I'm using:

GraphQL pageQuery

query {
  wpPost(slug: { eq: "hello-world" }){
    databaseId
    title
    content
  }
}

In the post component itself:

const Post = ({ data }) => (
  <Layout>
    <h1>{ data.wpPost.title }</h1>
    <div dangerouslySetInnerHTML={{
      __html: data.wpPost.content
    }} />
  </Layout>
)

The image url is still being displayed from the wordpress installation:

<figure class="wp-block-image"><img src="http://wpgraphql.localhost:8080/wp-content/uploads/2018/09/091218_1620_AddingUsers1.png" alt=""></figure>

http://wpgraphql.localhost:8080 is the wordpress installation and the baseURL in my gatsby-source-wordpress-experimental config

[TylerBarnes]

Hi everyone, apologies for the delayed response here. There have been some fixes in this area recently and I found a regression (and added a test to prevent it again) and I believe this issue is now fixed. I'm closing this as I'm cleaning up this repo but please comment and/or re-open this issue if the problem isn't resolved on the latest version of the plugin (gatsby-source-wordpress@5.0.0). Thanks everyone!