Allow "absolute path" and/or aliases usage with StaticImage

[cdanny358]

Description

StaticImage, from gatsby-plugin-image, only seems to work when the src is specified as a relative file path, such as ../../images/Filter.png. It fails with a path like /src/images/Filter.png. It also doesn't support webpack aliases.

[KyleAMathews]

Yes this is by design as we in general only support relative paths. Do you have a specific need for absolute paths?

[cdanny358]

Well, it's just much simpler to type a path starting in /src than to calculate how deeply you're nested relative to your images. Besides, src-relative paths work fine for importing images for use with an img tag, as you see above. Why wouldn't StaticImage be consistent with that? I also tend to set up aliases in the gatsby-node file for all the important folders in a project, so I can access the images with something like 'images/icon.png' from anywhere. Aliases work fine for pretty much everything except StaticImage.

[pieh]

I'll re-clasify this as a feature request (not bug report), due to the way it works now is intentional. I can see potential value in supporting "paths relative to root" or aliases, but not supporting them is NOT a bug.

Code wise - here's where we generate full path

gatsby/packages/gatsby-plugin-image/src/node-apis/image-processing.ts

Line 128 in 6cac9d2

fullPath = path.resolve(sourceDir, src)

Where sourceDir is directory of file being parsed

gatsby/packages/gatsby-plugin-image/src/node-apis/preprocess-source.ts

Line 67 in 6cac9d2

const sourceDir = path.dirname(filename)

Aliases work fine for pretty much everything except StaticImage

Webpack doesn't take part in StaticImage handling - we only do babel transform, so aliases defined for webpack just can't work. There possibly are other ways to define aliases (not scoped to webpack) that might be potentially used to achieve this feature

[w0rldart]

Is there a proposed solution to this feature request?

[jeron-diovis]

This approach also disallows to pass src as variable.

This doesn't work:

import src from 'src/images/some.png'
<StaticImage src={src} />

(because imported path will be like /static/some.png)

And even this doesn't work!

const src = '../../images/some.png'
<StaticImage src={src} />

If I have multiple images with numerous options which differ only by src – I have to copy-paste or somehow share all those options and pass them to each StaticImage individually – rather than make a subcomponent with an src prop.

And even IStaticImageProps is not exported from package, so I can't simply define a shared props set.

It's just a majorly inconvenient api in all regards.