6/25/2023 0 Comments Gatsby fluid image not showing![]() Install Gatsby Image yarn add gatsby-image I'll be using yarn for the rest of this demo. If you cloned the repo and used npm install, then continue to use npm so you don't mix the package installers. If you used the CLI, you'll need to continue with yarn since the initial packages were installed with yarn and there will be a yarn.lock file. You can clone the repo or use the Gatsby CLI to install the starter. ![]() We'll start off by installing the default Gatsby Starter. Here's a demo of the final product: Gatsby Image Demo ( view source ) Installing & Configuring Gatsby Image Test that you can query for your images using GraphQL.Ĭhoose which image type you will need, fixed or fluid, and add the query to your page. Install the required npm packages and configure your gatsby-config.js settings. If you're new to Gatsby, I highly recommend going through their official tutorial first and familiarize yourself with how Gatsby works.Īdding Gatsby Image to your static website can be a bit tricky, especially since Gatsby uses GraphQL to query and load your images before they can be used. It will resize images for you, so you don't load huge images on a mobile device, and it will also lazy load your images with a cool "blur-up" effect so that your initial page loads are blazing fast. Gatsby Image is a React component that makes it easy to optimize all the images on your website. Gatsby.js V2 was recently launched and there have been a few small changes to how Gatsby Image is implemented. ![]() ** NEW Video tutorial on Gatsby Image available on YouTube! **
0 Comments
Leave a Reply. |