Skip to content

Tips Import Image

Hidetaka Okamoto edited this page Apr 22, 2020 · 1 revision

We can import your WordPress site images into your Gatsby site.

$ yarn add gatsby-plugin-sharp gatsby-wordpress-inline-images gatsby-image

And put these props into gatsby-config.js

module.exports = {
  ...
  plugins: [
    ...
    'gatsby-plugin-sharp',
    {
      resolve: "gatsby-source-wordpress",
      options: {
        ...
        plugins: [
          {
            resolve: `gatsby-wordpress-inline-images`,
            options:
            {
              baseUrl: "central.wordcamp.org",
              protocol: `https`
            }
          }
        ]
      },
    },
  ],
}

Pros

  • Host your images in the same server
  • Can use local or ephemeral WordPress to the site's data source

Cons

  • You have to also rebuild when you want to just replace the image.
  • Build time will be longer and longer (Depends on your image numbers and sizes)

Another solution

You can host your images in another server, Amazon S3, Cloud Storage, any CDN service, etc.. Shifter has a Media CDN, we can host your image in another server.

Clone this wiki locally