Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /**
- * Required plugins: gatsby-source-filesystem and gatsby-plugin-sharp
- *
- * Basic Hook Usage:
- *
- * import useImgSrc from '../utils/useImgSrc';
- *
- * const Image = ({img}) => {
- * const imgSrc = useImgSrc(img);
- *
- * return (
- * <img src={imgSrc} />
- * )
- * }
- *
- * <Image img="example.png" />
- */
- import { graphql, useStaticQuery } from 'gatsby';
- interface IImgSharp {
- node: {
- fluid: {
- src: string;
- };
- };
- }
- const useImgSrc = (img: string) => {
- const { allImageSharp } = useStaticQuery(
- graphql`
- query {
- allImageSharp {
- edges {
- node {
- fluid {
- src
- }
- }
- }
- }
- }
- `,
- );
- const imgSrc = allImageSharp.edges.filter((image: IImgSharp) => {
- return image.node.fluid.src.includes(img);
- });
- return imgSrc[0].node.fluid.src;
- };
- export default useImgSrc;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement