Community Plugin
View plugin on GitHub@gvrs/gatsby-transformer-image-mask
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
- @gvrs/gatsby-transformer-blurhash — generate BlurHash placeholders for images