gatsby-plugin-image#StaticImage JavaScript Examples

The following examples show how to use gatsby-plugin-image#StaticImage. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: index.js    From royalhackaway.com with MIT License 6 votes vote down vote up
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>
  )
}
Example #2
Source File: image.js    From gatsby-ipfs-web-wallet with MIT License 6 votes vote down vote up
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'
      />
    </>
  )
}
Example #3
Source File: Player.jsx    From xetera.dev with MIT License 6 votes vote down vote up
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" />
  }
}
Example #4
Source File: contact.js    From barcadia with MIT License 6 votes vote down vote up
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>
    </>
  )
}
Example #5
Source File: brand.js    From ruhulamin.dev with BSD Zero Clause License 6 votes vote down vote up
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>
  );
}
Example #6
Source File: index.js    From ReactCookbook-source with MIT License 6 votes vote down vote up
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>
)
Example #7
Source File: index.js    From gatsby-tailwindcss-starter with MIT License 6 votes vote down vote up
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>
)
Example #8
Source File: index.js    From create-magic-app with MIT License 6 votes vote down vote up
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>
  )
}
Example #9
Source File: index.js    From royalhackaway.com with MIT License 6 votes vote down vote up
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>
  )
}
Example #10
Source File: index.jsx    From xetera.dev with MIT License 6 votes vote down vote up
XeteraLarge = () => {
  return (
    <StaticImage
      width={600}
      height={600}
      quality={100}
      layout="fixed"
      src="./xetera_girlboss_2.jpeg"
      alt="Xetera"
    />
  )
}
Example #11
Source File: index.jsx    From xetera.dev with MIT License 6 votes vote down vote up
XeteraMedium = () => {
  return (
    <StaticImage
      width={300}
      height={300}
      quality={100}
      layout="fixed"
      placeholder="tracedSVG"
      src="./xetera_girlboss_2.jpeg"
      alt="Xetera"
    />
  )
}
Example #12
Source File: PerksModule.js    From barcadia with MIT License 5 votes vote down vote up
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>
  )
}
Example #13
Source File: BannerModule.js    From barcadia with MIT License 5 votes vote down vote up
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>
    </>
  )
}
Example #14
Source File: index.jsx    From xetera.dev with MIT License 5 votes vote down vote up
Omegalul = () => (
  <StaticImage src="./omegalul.png" {...sharedProps} />
)
Example #15
Source File: index.jsx    From xetera.dev with MIT License 5 votes vote down vote up
Kekw = () => <StaticImage src="./kekw.png" {...sharedProps} />
Example #16
Source File: index.jsx    From xetera.dev with MIT License 5 votes vote down vote up
ThisArrow = () => (
  <StaticImage src="./thisarrow.gif" {...sharedProps} />
)
Example #17
Source File: index.jsx    From xetera.dev with MIT License 5 votes vote down vote up
ThisTbh = () => (
  <StaticImage src="./thistbh.png" {...sharedProps} />
)
Example #18
Source File: index.jsx    From xetera.dev with MIT License 5 votes vote down vote up
ThumbsDown = () => (
  <StaticImage src="./thumbs_down.png" {...sharedProps} />
)
Example #19
Source File: index.jsx    From xetera.dev with MIT License 5 votes vote down vote up
Clap = () => <StaticImage src="./clap.png" {...sharedProps} />
Example #20
Source File: index.jsx    From xetera.dev with MIT License 5 votes vote down vote up
SanaKek = () => (
  <StaticImage src="./sana_kek.png" {...sharedProps} />
)
Example #21
Source File: index.jsx    From xetera.dev with MIT License 5 votes vote down vote up
Xetera = () => {
  return <StaticImage {...common} src="./xetera_girlboss_2.jpeg" alt="Xetera" />
}
Example #22
Source File: index.jsx    From xetera.dev with MIT License 5 votes vote down vote up
TzuyuAvatar = () => {
  return <StaticImage {...common} src="./tzuyu.png" alt="Tzuyu Avatar" />
}
Example #23
Source File: index.jsx    From xetera.dev with MIT License 5 votes vote down vote up
JiuAvatar = () => {
  return <StaticImage {...common} src="./jiu.png" alt="Kim Minji Avatar" />
}
Example #24
Source File: index.jsx    From xetera.dev with MIT License 5 votes vote down vote up
Dubu = () => (
  <StaticImage {...common} src="./dubu.png" alt="Dahyun" />
)
Example #25
Source File: index.jsx    From xetera.dev with MIT License 5 votes vote down vote up
DubuConfused = () => (
  <StaticImage {...common} src="./dahyun_confused.jpg" alt="Confused Dahyun" />
)
Example #26
Source File: index.jsx    From xetera.dev with MIT License 5 votes vote down vote up
RobPike = () => (
  <StaticImage {...common} src="./rob_pike.png" alt="Rob Pike" />
)
Example #27
Source File: index.jsx    From xetera.dev with MIT License 5 votes vote down vote up
Drac = () => <StaticImage src="./drac.png" {...common} />
Example #28
Source File: index.jsx    From xetera.dev with MIT License 5 votes vote down vote up
Marco = () => <StaticImage src="./marco.png" {...common} />
Example #29
Source File: index.jsx    From xetera.dev with MIT License 5 votes vote down vote up
Angery = () => <StaticImage src="./angery.png" {...sharedProps} />