Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub

gatsby-source-imgix

Creates gatsby-image compatible field based on any string field (with image url) of the node, leveraging imgix CDN. Pretty similar to what gatsby-plugin-remote-images does, except images are not processed locally (during the build time), but in the request time.

Usage

Install

First, install the plugin.

npm install --save gatsby-source-imgix

Config

Second, set up the gatsby-config.js with the plugin. The most common config would be this:

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-imgix`,
      options: {
        imgixDomain: 'your_imgix_domain',
        imgixToken: 'your_imgix_token',
        imageOptions: [
          {
            nodeType: 'myNode',
            sourcePath: 'url_to_original_image',
            fieldName: 'image_field_name',
          },
        ],
      },
    },
  ],
};

Where sourcePath field should contain an image url.

© 2024 Gatsby, Inc.