Webinar

“Digging into Gatsby 5’s Slice API” Register now

ContactSign Up for Free
Community Plugin
View plugin on GitHub

Wrapper component for GatsbyImage, to be used with api data from Strapi v4

Ideal for SSR since this image does not get processed by image-sharp

🚀 Quick start

Add the plugin

  1. Initialize a new plugin from the starter with gatsby new
yarn add @seansly/gatsby-source-strapi-images
  1. Include the plugin in a Gatsby site

Inside of the gatsby-config.js file of your site (in this case, my-gatsby-site), include the plugin in the plugins array:

module.exports = {
  plugins: [
    // other gatsby plugins
    // ...
    "@seansly/gatsby-source-strapi-images",
  ],
};
  1. Define a urlBuilder function, you would create this based on what media options are in your strapi configuration.
export default function urlBuilder({
  baseUrl,
  width,
  height,
  format,
  options,
}: any) {
  let formats = baseUrl.formats;
  console.log(baseUrl, width);
  if (width > 2000 || width == baseUrl.width) {
    return baseUrl.url;
  } else if (formats.large && width > 750) {
    return formats.large.url;
  } else if (formats.medium && width > 500) {
    return formats.medium.url;
  } else {
    return formats.small.url;
  }
}
  1. Use the component
import {
  StrapiImage,
  StrapiImageApiResponse,
} from "@seansly/gatsby-source-strapi-images";
interface SSRPageProps {
  data: {
    attributes: {
      Image: StrapiImageApiResponse,
    },
  };
}

const SSRPage = ({
  data: {
    attributes: { Image },
  },
}: SSRPageProps) => {
  return <StrapiImage image={Image} />;
};
© 2022 Gatsby, Inc.