1/31/2024 0 Comments Gatsby fluid image not showing![]() The yaml file that defined the data for my speaking page had references to the file name of each image. The image files were all stored in the folder labeled speaking. In my Jekyll site implementation each of my speaking engagements had an associated image, like this. Now we’re set up to tackle the more complicated use case, my speaking page. ![]() Note that once `gatsby-image` has been installed it does not need to be included in the gatsby-config.js file. Our config file ends up looking like this (other plugins we’re already using have been removed from this snippet for simplicity). Once that’s done, I want to add the newly installed plugins to my gatsby-config.js file. npm install gatsby-image gatsby-transformer-sharp gatsby-plugin-sharp In order to make use of it I’ll start by using npm to install that plugin and its associated dependencies. Image optimization in Gatsby is provided by a plugin called `gatsby-image` which is incredibly performant. In the process, I’ll tackle a slightly more complicated use case. Since optimization is one of the major benefits of using Gatsby let’s look at how to do that. It looks great! However, it isn’t optimized. The headshot class handles the nice circular display of the image as well as its center alignment on the page. Something like this: import headshot from './assets/headers/headshot.jpg' I can import the image file and reference it directly in my JSX code for the home page. There is a straightforward way to handle this image.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |