Search code examples
reactjspathstaticgatsby

static file image path in gatsby

I'm trying to add some images form static folder in gatsby but somehow the path is always incorrect . Can anyone help me with defining the right path? I tried paths like this

../../static/1.jpg

this

../../1.jpg

and this

/1.jpg

Neither of them worked. It always display the same error

Can't resolve 'img1(or any other path)' in 'S:\Programowanie\Garni\src\pages'

The structure of the project look like this
structure

Solution

  • The static folder recreates the exact same internal structure to the public one so:

    <img src={'/1.jpg'} alt="Some alt text" />;

    Should be a valid path for /static/1.jpg structure. And so on for the rest. Keep in mind that the key "static" should never be in the src of the image because it's "invisible" to Gatsby's public folder. All paths start from static as a root.

    Keep in mind, as a downside, that using static assets will cause those images scapes the post-process and modification.

    I'd strongly recommend cleaning the cache in each trial (static assets are hardly cached sometimes) by running gatsby clean.