Gatsby — Static Assets Test

← back home (client-side <Link>)

1. Hardcoded static path (silent-breakage case)

<img src="/test-logo.png" />
hardcoded static

2. withAssetPrefix() wrapped

<img src={withAssetPrefix("/test-logo.png")} />
prefix-wrapped

3. ESM-imported asset (build-processed)

import testImage from "../images/test-image.png"
esm-imported

4. gatsby-plugin-image <StaticImage>

<StaticImage src="../images/test-framework.png" />
static-image

5. CSS background-image (url("/test-bg.png"))

6. Favicon — check the document head & browser tab

<link rel="icon" href="/favicon.png" /> (in Head)

7. OG image meta — check the document head

<meta property="og:image" content="/og-test.png" /> (in Head)