I’ve placed my og:image file into a static folder in my Gatsby directory. When I run gatsby build and then gatsby serve locally and go to the path for the image, it resolves properly, however when I deploy to Netlify and go to the path I get my 404 page. Any idea what might be going wrong?
Netlify URL: https://practical-roentgen-3d187c.netlify.com/
Prod URL: https://mikeriley.dev/
Social Image URL: https://mikeriley.dev/mr-social-image.jpg
I use this same functionality, and it certainly works.
I had a look at your site, and noticed that a bunch of images are stored in a ‘static’ folder. Eg: https://practical-roentgen-3d187c.netlify.com/static/headshot-f2c018c63e4138b3e1290d11069be71e.jpg
What I suspect is that you placed these images is a folder called ‘static’ in Gatsby’s ‘src’ directory.
From there, when you reference an image in the page (like this headshot example), Gatsby will pull the images into the build, and place it in the static folder.
But that the is not the ‘static’ behavior you are looking for. The ‘static’ folder goes into the root dir of your repo (so not in the ‘src’ folder). Files that you place there will not go in a ‘static’ subdirectory, but directly in the root of your site.
The reason the problem only happens with your OG image, is because other images are loaded in the site either via an import, or an image component. So Gatbsy ‘knows’ about these images and will pull them into the build.
But your OG images is probably just a string, Gatsby doesn’t know about it, and because your static folder is in the wrong place, it won’t show up.
Can’t know for sure without seeing your repo, but this is what I suspect is going on.
Wow, I think I was putting the social image straight into the built public folder, as opposed to the static folder I had in the root of my directory. Thanks for putting me on the right path.
