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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
Omegalul = () => (
<StaticImage src="./omegalul.png" {...sharedProps} />
)
Example #15
Source File: index.jsx From xetera.dev with MIT License | 5 votes |
Kekw = () => <StaticImage src="./kekw.png" {...sharedProps} />
Example #16
Source File: index.jsx From xetera.dev with MIT License | 5 votes |
ThisArrow = () => (
<StaticImage src="./thisarrow.gif" {...sharedProps} />
)
Example #17
Source File: index.jsx From xetera.dev with MIT License | 5 votes |
ThisTbh = () => (
<StaticImage src="./thistbh.png" {...sharedProps} />
)
Example #18
Source File: index.jsx From xetera.dev with MIT License | 5 votes |
ThumbsDown = () => (
<StaticImage src="./thumbs_down.png" {...sharedProps} />
)
Example #19
Source File: index.jsx From xetera.dev with MIT License | 5 votes |
Clap = () => <StaticImage src="./clap.png" {...sharedProps} />
Example #20
Source File: index.jsx From xetera.dev with MIT License | 5 votes |
SanaKek = () => (
<StaticImage src="./sana_kek.png" {...sharedProps} />
)
Example #21
Source File: index.jsx From xetera.dev with MIT License | 5 votes |
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 |
TzuyuAvatar = () => {
return <StaticImage {...common} src="./tzuyu.png" alt="Tzuyu Avatar" />
}
Example #23
Source File: index.jsx From xetera.dev with MIT License | 5 votes |
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 |
Dubu = () => (
<StaticImage {...common} src="./dubu.png" alt="Dahyun" />
)
Example #25
Source File: index.jsx From xetera.dev with MIT License | 5 votes |
DubuConfused = () => (
<StaticImage {...common} src="./dahyun_confused.jpg" alt="Confused Dahyun" />
)
Example #26
Source File: index.jsx From xetera.dev with MIT License | 5 votes |
RobPike = () => (
<StaticImage {...common} src="./rob_pike.png" alt="Rob Pike" />
)
Example #27
Source File: index.jsx From xetera.dev with MIT License | 5 votes |
Drac = () => <StaticImage src="./drac.png" {...common} />
Example #28
Source File: index.jsx From xetera.dev with MIT License | 5 votes |
Marco = () => <StaticImage src="./marco.png" {...common} />
Example #29
Source File: index.jsx From xetera.dev with MIT License | 5 votes |
Angery = () => <StaticImage src="./angery.png" {...sharedProps} />