Community Plugin
View plugin on GitHub

@gvrs/gatsby-transformer-image-mask

npm (scoped) NPM PRs Welcome

Refine edges of placeholders with transparent parts

Configuration

// In your gatsby-config.js
module.exports = {
  plugins: [
    `gatsby-plugin-image`,
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
    `@gvrs/gatsby-transformer-image-mask`,
  ],
};

Usage example

Fetching data

imageSharp {
  gatsbyImageData
  imageMask {
    base64
  }
}

Rendering

import { GatsbyImage } from "gatsby-plugin-image";
import styled from "@emotion/styled";

const GatsbyImageWithMask = styled(GatsbyImage)`
  & [data-placeholder-image] {
    mask-image: url("${(props) => props.mask}");
    mask-size: "contain";
    mask-position: "center center";
    mask-repeat: "no-repeat";
  }
`;

const Image = ({ gatsbyImageData, imageMask }) => (
  <GatsbyImageWithMask image={gatsbyImageData} mask={imageMask.base64} />
);

Returns

  • base64 (string) — base 64 encoded svg mask

Additional documentation

See also

© 2022 Gatsby, Inc.