6/13/2023 0 Comments Gatsby fluid image not showing![]() ![]() We solved our problem, but what if we want to reuse those images elsewhere in our project?Īll of the alt texts are just hardcoded in our page component. Now, our art-directed images have alt text. in whatever page will render the images. Pass the array to the gatsby-image component.To get our images art-directed with Gatsby, we'll follow these steps: If not, I would suggestįollowing the documentation here to get setup and learn how to render a single image in Gatsby. If you have worked with gatsby-image before, this will be very familiar to you. When your website shows different images based on different break points, this is known as art direction. Others might look great small, but look weird or get grainy large. Some images look great when they are really big, but a bit insipid when they are small. Not all images will look good at any size. If you want to skip this post and go straight to the repo, So, I thought I would share it with you :) ![]() Since making inaccessible websites is something bad devs do (and I want to be a good dev), I came up with a solution using state and custom graphql fields. Realized that there was not an obvious way of supplying alt text to my images. When I started exploring art direction and building an example site for the talk, I Gatsby does with your images out-of-the-box. I had spoken at this meetup before about working with images in Gatsby and all of the cool stuff I recently gave a talk at the GatsbyNYC meetup about doing art direction with images in Gatsby. ![]()
0 Comments
Leave a Reply. |