gatsby-plugin-image#StaticImage JavaScript Examples

LeftHandImage = ({ children }) => {
  return (
    <div className="row">
      <div className="col-12 col-xs-1 col-sm-2 col-md-2 col-lg-4">
        <StaticImage
          src="./IMG_3933.JPG"
          className={imageClass}
          layout="fullWidth"
        />
      </div>
      <div className="col-12 col-xs-11 col-sm-10 col-md-10 col-lg-8">
        {children}
      </div>
    </div>
  )
}

Image = () => {
  /*   const data = useStaticQuery(graphql`
    query {
      placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
        childImageSharp {
          fixed {
            ...GatsbyImageSharpFixed
          }
        }
      }
    }
  `) */
  return (
    <>
      <StaticImage
        src='../images/gatsby-astronaut.png'
        alt='please include an alt'
      />
    </>
  )
}

AlbumCover = ({ state }) => {
  const spot = (
    <StaticImage
      quality="100%"
      src="./spotify.png"
      placeholder="none"
      alt="Spotify logo"
    />
  )
  if (state.type === "ready") {
    return <Image src={state.src} objectFit="cover" />
  } else if (state.type === "notAuthorized") {
    return <Box p={3}>{spot}</Box>
  } else if (state.type === "timedOut") {
    return (
      <Box p={3} filter="grayscale(1)">
        {spot}
      </Box>
    )
  } else {
    return <Skeleton alignSelf="center" h="full" w="full" />
  }
}

contact = () => {
  return (
    <>
      <Seo title="Contact" />
      <Layout>
        <SimpleBanner title="Get in touch">
          <StaticImage
            className="banner__image"
            src="../../static/macbook-dark.jpg"
            alt="Apple Macbook Dark"
          />
        </SimpleBanner>
        <Contact />
      </Layout>
    </>
  )
}

Brand = ({ className }) => {
  return (
    <Link
      aria-label="Go to homepage"
      className={"flex items-center " + className}
      to="/"
    >
      <StaticImage
        placeholder="blurred"
        src="../images/developer-ruhul.jpg"
        width={48}
        formats={["AUTO", "WEBP", "AVIF"]}
        alt="Ruhul Amin"
        className="rounded-full mr-2"
      />
      <span className="text-gray-900 font-bold tracking-tighter">
        Developer Ruhul
      </span>
    </Link>
  );
}

IndexPage = () => (
  <Layout>
    <Seo title="Home" />
    <h1>Hi people</h1>
    <p>Welcome to your new Gatsby site.</p>
    <p>Now go build something great.</p>
    <StaticImage
      src="../images/gatsby-astronaut.png"
      width={300}
      quality={95}
      formats={["AUTO", "WEBP", "AVIF"]}
      alt="A Gatsby astronaut"
      style={{ marginBottom: `1.45rem` }}
    />
    <p>
      <Link to="/page-2/">Go to page 2</Link> <br />
      <Link to="/using-typescript/">Go to "Using TypeScript"</Link>
    </p>
  </Layout>
)

IndexPage = () => (
  <Layout>
    <SEO title="Home" />
    <h1>Hi people</h1>
    <p>Welcome to your new Gatsby site.</p>
    <p>Now go build something great.</p>
    <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
      <StaticImage
        src="../images/gatsby-astronaut.png"
        alt="gatsby astronaut"
      />
    </div>
    <p><Link to="/page-2/">Go to page 2</Link></p>
    <p><Link to="/using-typescript/">Go to "Using TypeScript"</Link></p>
  </Layout>
)

IndexPage = () => { 
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  useEffect(() => {
    // On mount, we check if a user is logged in.
    // If so, we'll retrieve the authenticated user's profile.
    magic.user.isLoggedIn().then(setIsLoggedIn);
  }, []);

  return (
    <Layout>
      <Seo title="Home" />
      <h1>Hi people</h1>
      <p>Welcome to your new Gatsby site with passwordless authentication powered by <a href="https://magic.link" target="_blank" rel="noopener noreferrer">Magic</a>.</p>

      <p>
        {isLoggedIn ? <Link to="/app/profile">Profile</Link> : <Link to="/app/login">Login</Link>}
      </p>

      <StaticImage
        src="../images/gatsby-magic.png"
        width={500}
        quality={95}
        formats={["AUTO", "WEBP", "AVIF"]}
        alt="Gatsby site with passwordless authentication powered by Magic."
        style={{ marginBottom: `1.45rem` }}
      />
      
    </Layout>
  )
}

EventJumbotronParallax = ({ children, className, style }) => {
  return (
    <Parallax strength={300} className={jumbotronClass}>
      <Background className={backgroundClass}>
        <StaticImage
          src="./IMG_3962.blur.jpg"
          className={imageClass}
          layout="fullWidth"
        />
      </Background>
      <div className="container my-5">
        <div className="row justify-content-center">
          <div className="col-12 col-sm-10 col-md-8 col-lg-7 col-xl-7">
            {children}
          </div>
        </div>
      </div>
    </Parallax>
  )
}

XeteraLarge = () => {
  return (
    <StaticImage
      width={600}
      height={600}
      quality={100}
      layout="fixed"
      src="./xetera_girlboss_2.jpeg"
      alt="Xetera"
    />
  )
}

XeteraMedium = () => {
  return (
    <StaticImage
      width={300}
      height={300}
      quality={100}
      layout="fixed"
      placeholder="tracedSVG"
      src="./xetera_girlboss_2.jpeg"
      alt="Xetera"
    />
  )
}

PerksModule = () => {
  return (
    <PerksModuleStyles className="section section__padding">
      <StaticImage
        className="perks__image--bg"
        src="../../../static/abstract-building.jpg"
        alt="Perks Module"
        layout="constrained"
        placeholder="tracedSVG"
      />
      <div className="perks__image--overlay"></div>
      <div className="container container__tight">
        <Perk
          title="Built For Speed"
          content="By using GatsbyJS, the Barcadia site is super-fast out of the box"
        >
          <StaticImage
            src="../../../static/logos/gatsby-logo.svg"
            alt="Perk Image"
            layout="constrained"
            placeholder="tracedSVG"
          />
        </Perk>
        <span className="perks__divider">
          <Cross />
        </span>
        <Perk
          title="Built For Content"
          content="Contentful helps you edit your application with ease as your business expands"
        >
          <StaticImage
            src="../../../static/logos/contentful-logo.svg"
            alt="Perk Image"
            layout="constrained"
            placeholder="tracedSVG"
          />
        </Perk>
      </div>
    </PerksModuleStyles>
  )
}

BannerModule = ({ children, title, subTitle, price, enquire }) => {
  function scrollToArea() {
    navigate("#topContent")
  }

  return (
    <>
      <BannerModuleStyles>
        {children ? (
          children
        ) : (
          <StaticImage
            className="banner__image"
            imgClassName="banner__image--content"
            src="../../../static/macbook-color.jpg"
            alt="Banner Image"
            layout="fullWidth"
            placeholder="blurred"
          />
        )}

        <div className="container">
          <div className="banner__content">
            {title && (
              <h1>
                {title}
                <span style={{ color: "var(--primary)" }}>.</span>
              </h1>
            )}
            {subTitle && <h2>{subTitle}</h2>}
            {price && (
              <h2 className="price">
                £{price}
                <span style={{ color: "var(--primary)" }}>.</span>
              </h2>
            )}
            <div className="banner__btns">
              {enquire && (
                <Button
                  className="btn"
                  text="Enquire Now"
                  as={Link}
                  to="/contact"
                />
              )}
              <Button onClick={scrollToArea} text="Learn More" />
            </div>
          </div>
        </div>
        <div className="gradient"></div>
      </BannerModuleStyles>
      <span id="topContent"></span>
    </>
  )
}

Omegalul = () => (
  <StaticImage src="./omegalul.png" {...sharedProps} />
)

Kekw = () => <StaticImage src="./kekw.png" {...sharedProps} />

ThisArrow = () => (
  <StaticImage src="./thisarrow.gif" {...sharedProps} />
)

ThisTbh = () => (
  <StaticImage src="./thistbh.png" {...sharedProps} />
)

ThumbsDown = () => (
  <StaticImage src="./thumbs_down.png" {...sharedProps} />
)

Clap = () => <StaticImage src="./clap.png" {...sharedProps} />

SanaKek = () => (
  <StaticImage src="./sana_kek.png" {...sharedProps} />
)

Xetera = () => {
  return <StaticImage {...common} src="./xetera_girlboss_2.jpeg" alt="Xetera" />
}

TzuyuAvatar = () => {
  return <StaticImage {...common} src="./tzuyu.png" alt="Tzuyu Avatar" />
}

JiuAvatar = () => {
  return <StaticImage {...common} src="./jiu.png" alt="Kim Minji Avatar" />
}

Dubu = () => (
  <StaticImage {...common} src="./dubu.png" alt="Dahyun" />
)

DubuConfused = () => (
  <StaticImage {...common} src="./dahyun_confused.jpg" alt="Confused Dahyun" />
)

RobPike = () => (
  <StaticImage {...common} src="./rob_pike.png" alt="Rob Pike" />
)

Drac = () => <StaticImage src="./drac.png" {...common} />

Marco = () => <StaticImage src="./marco.png" {...common} />

Angery = () => <StaticImage src="./angery.png" {...sharedProps} />