Community Plugin

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

Initialize a new plugin from the starter with gatsby new

yarn add @seansly/gatsby-source-strapi-images

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",
  ],
};

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;
  }
}

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} />;
};