gatsby-image-plugin, Absolute path in <StaticImage> component for static images

Question

I'd like to use an absolute path in the src prop of the StaticImage component in gatsby-plugin-image .

However, the documentation says that src only accepts relative paths.

Given this directory structure:

├─ images/
│  ├─ image.png
├─ pages/
│  ├─ index.js

I currently have to do something like this:

const IndexPage = () => (
  <div>
    <StaticImage src="../images/image.png" alt="image" />
  </div>
);

How can I get this instead?

const IndexPage = () => (
  <div>
    <StaticImage src="src/images/image.png" alt="image" />
  </div>
);
``

Answer 1

Use:

const IndexPage = () => (
  <div>
    <StaticImage src="./src/images/image.png" alt="image" />
  </div>
);

Or:

const IndexPage = () => (
  <div>
    <StaticImage src="../../images/image.png" alt="image" />
  </div>
);

Both should work either way. The only problem you may be facing is the relativity of your paths. You may need to use ../.. (check it in your specific use-case) or use ./src/... .