Community Plugin
View plugin on GitHub@gvrs/gatsby-transformer-blurhash
Generate BlurHash placeholders for images.
Configuration
// In your gatsby-config.js
module.exports = {
plugins: [
`gatsby-plugin-image`,
`gatsby-plugin-sharp`,
`gatsby-transformer-sharp`,
`@gvrs/gatsby-transformer-blurhash`,
],
};
Usage example
Fetching data
imageSharp {
gatsbyImageData(
placeholder: NONE
)
blurHash(
componentX: 3,
componentY: 4,
width: 32
) {
base64Image
hash
}
}
Rendering
import { GatsbyImage } from "gatsby-plugin-image";
const Image = ({ gatsbyImageData, blurHash }) => (
<GatsbyImage
image={{
...gatsbyImageData,
placeholder: {
fallback: blurHash.base64Image,
},
}}
/>
);
Parameters
width
(int, default: 32)componentX
(int, between 1 and 9, default: 3)componentY
(int, between 1 and 9, default: 4)
Returns
hash
(string) — base 83 data returned by BlurHashbase64Image
(string) — base 64 encoded image
Additional documentation
Prior art, inspiration
See also
- gatsby-transformer-image-mask — remove ragged edges from placeholders