One thing I wanted to mention shortly, that there is a nice plugin, that can help you to get inline images as local static images. Import FluidImage from "././components/FluidImage" Import Layout from "././components/Layout" 1.) Add Resolver to Gatsby // gatsby-node.jsĬonst = pageContext Gatsby will then automatically treat the images as files, that are getting processed by gatsby-image. We gonna make use of Gatsby’s abilities to add custom resolvers, to customize the schema, so that WordPress images get handled as local Files. I already wrote an article about this, but for the sake of integrity of the tutorial series, I gonna add the information here too. What we want instead though, is a local image, with the abilities to use gatsby-image‘s filters. Now run gatsby develop and checkout Run:Īs you can see we get an absolute path to the featured images with sourceUrl.
#Gatsby fluid image not showing update
5.) Update page, blog and post templateĪfter adding images to the posts, let’s also add some featured images to our pages.Update PostTemplateFragment and BlogPreviewFragment.
3.) Add fragment to createPages.js and createPosts.js.In this part I will show you, how you can make use of gatsby-images superpowers and deliver your images in a static fashion.
Now, how do we get these images to be local and do some more magic with them? Gatsby comes with a super helpful plugin called gatsby-image for image processing at build time. After the previous part we have a blog ready with featured images.
0 kommentar(er)
