Question: How to include static assets like images folder and other types ?

[mmacedoeu]

For those beginning without webpack knowledge and without the time, what is the fast setup to include images folder so you can load images when in develop mode and build time with img src like "/images/mycover.gif" and a static folder where files like robots.txt sitemap and other got pushed to public in the end ? This question is for the default starter when you create a project with gatsby new my-test-gatsby-site

[KyleAMathews]

Images you can just put in the /pages/ directory and they'll get pushed to /public/. In Gatsby 0.x there isn't yet a static folder where everything just gets copied over. That's something I'd like to add so would welcome a PR. In the meantime, Gatsby has an API postBuild that you can use to copy on build. Create a gatsby-node.js file in the root of your site and export postBuild from that. See this site for an example https://github.com/britt/britt.github.com/blob/78b11b552279aab04cb68de4fe55eaec2aa45294/gatsby-node.js#L99

[m4rrc0]

@KyleAMathews , what's the recommended way to do this on 1.0 ? I found that the 'assets' folder is intended to be used for that purpose but I guess this is not working yet?!

[KyleAMathews]

There hasn't been anything done on this yet for 1.0. With Gatsby 1.0's plugin architecture, you can create a plugin which copies things over to public from an asset folder on build and during development. Let me know if you want to work on this!

[m4rrc0]

If you are willing to provide guidance I am up for it. I am still a baby in the dev world. Never published an NPM package, discovered Lerna a couple days ago and I still have no clue how the whole dev part of Gatsby works with the hot reload and so on. I will dive into this. In the meantime if you have some pieces of advice to help me make the most out of my time I'd be grateful.

[KyleAMathews]

Oh :-) ok, my advice wasn't very applicable then. Well the easiest way then is to leverage webpack. You can just require files and they'll get added to the public folder automatically on build.

[m4rrc0]

Oh, sorry, my comment was misleading. I meant pieces of advice to get me started with the plugin. (For the sake of my testings I wrote a 2-lines script to copy my assets after build so that was not the focus of my question). Maybe you could outline real quick how you would fetch what and when so I can look in the right places to write the plugin? I had a look in the plugin architecture and things are starting to make sense.

[KyleAMathews]

Oh haha :-) so you're using a 1.0 alpha?

On Wed, Mar 29, 2017, 10:39 AM M4rrc0 notifications@github.com wrote:

Oh, sorry, my comment was misleading. I meant pieces of advice to get me started with the plugin. (For the sake of my testings I wrote a 2-lines script to copy my assets after build so that was not the focus of my question). Maybe you could outline real quick how you would fetch what and when so I can look in the right places to write the plugin? I had a look in the plugin architecture and things are starting to make sense.

— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub https://github.com/gatsbyjs/gatsby/issues/501#issuecomment-290110911, or mute the thread https://github.com/notifications/unsubscribe-auth/AAEVhzhHiH_RJ_u5fdBgJhqiJi4eaz1qks5rqm0DgaJpZM4KWOxx .

[m4rrc0]

yep

[KyleAMathews]

Search for the postBuild API in this file https://github.com/gatsbyjs/gatsby/blob/1.0/www/gatsby-node.js

You'll want to do something very similar in your sites gatsby-node.js

[hsribei]

It seems like the best way to include static assets at the moment is to put them directly into /public and add them to git with git add -f.

[m4rrc0]

@hsribei at the time I made a little script but now #956 handles it. btw, I've come across your blog post yesterday. Nice! Let's hope you'll get people to join us on Gatsby. ;)

[rstacruz]

Hey, just came across this myself. I'm trying out Gatsby as an article publishing platform, and I was hoping doing Markdown images would work:

# pages/index.md
![](images/foo.jpg)

# pages/images/foo.jpg

...I was disappointed to see that this doesn't work though. How would this be handled in 1.0, and is it possible to make a Gatsby 0.12 polyfill for it? I'd be happy to help contribute that.

[dougajmcdonald]

@rstacruz appreciate this might be a bit late but I believe what you want now works.

I have done the following:

# pages/index.md ![](img.png)

#pages/img.png

and it's working for me.

EDIT: working for me via gatsby develop working on getting things working via build

[avinashs735]

I can not access local images stored in pages folder in computer using tag...... though it accesses any image weblink....... I am new to gatsby help me with this....

[fk]

Hey @avinashs735! Have you seen https://www.gatsbyjs.org/docs/adding-images-fonts-files/?

[avinashs735]

yes I have the documentation that is why I asked,Is there anything i need to in my code coz I am unable to use the image stored locally in same folder where as the same works for http urls.

[mbliok]

Is it enough if I turn it on robots.txt in folder pages in my gatsby project?

[tetreault]

is there a nicer way than how the doc proposes? for example with nuxt i can just refer to the path as such in the img src ~static/sub/folder/image.png.

edit: to expand on my comment - i do appreciate the rational behind a 404 image throwing a compile error, so i think i'll stick to the doc's way for now. the escape hatch method just seems a little gnarly, but idk take that with a grain of salt just my opinion!

[brendanmc6]

I'm struggling to grab images stored in my CMS (airtable) and place them in a designated folder. this would make it easy to reference them in my markdown like 

For some reason I can not query for publicURL as stated in the docs-- I can confirm that my photos are downloading correctly, as I see them located in .cache/gatsby-source-filesystem/, albeit with scrambled filenames.

Any help would be greatly appreciated.