Aiki x Developer

gatsby

Struggling images in Gatsby? Make as a component.

June 6th, 2019

gatsby-logo

Hallo, I'm Arisa, a freelance Full-Stack & Frontend Developer living in Germany.

Just a few days ago, I launched this website, my blog and portfolio powered by Gatsby.js, Netlify and Contentful.

I guess it took about 2 weeks to develop, including drawing all images I put except in articles.

There are still some of the details I need to apply new or edit better, but so far, I really loved the environment I chose for development.

I've been using Gatsby since version 2 was released in the last year.

As I started my programmer career from Frontend, I love JS and React based libraries and frameworks✨

Gatsby is one of them, so I straight away got used useing it.

Developing an e-commerce site was also like a smooth flow the combination with Lambda, Netlify and Stripe to make a server less & JAMStack site.

Some people say Gatsby is not their thing because it pulls all articles every time when they just upload a new article or update something for small or something else.

I also have some stuffs which I thought a bit inconvenient while I was coding.

But overall in general, for me, Gatsby works well and I like developing webs and web apps with Gatsby.

(I'm guessing developers mostly complain Gatsby are the one developed webs with version 1 and had to change into version 2.)

This time, I would like to share one of the ways to solve an issue to display images in Gatsby.

Quite a lot of people got into a trap struggling to display images.

I also was one of them got into this trap several times and I feel this is somehow a bit frustrating to struggle every time with creating new projects.

"There must be some ways to make it easier and efficiently..."

Here is what I came up with, make as a component and just call wherever I want💡

Create a component to display images

To see a difference, here is what you'll need to write in order to display images with gatsby-image.

gatsby-image-original-code

That's pretty much from what Gatsby's doc is saying.

I shortcut for the installation because it's all in the docs.

https://www.gatsbyjs.org/packages/gatsby-image/

It's just simple 3 steps.

  1. Import gatsby-image

  2. Find the right data query from GraphQl and write them

  3. Call it with fluid in JSX

Easy!

But here is what you'll face for the long journey sometimes, can't get the image data query.

Why?

And you'll might spend few minutes to figure out.

Do you want to have same minutes and hours again to figure out when you create new projects?

Definitely, NO go😱

Just create as a component then you only suffer once to figure out displaying images in your pages.

Here is what I made as a component.

gatsby-image-component

All you need to do to call this Image component is, calling in wherever in the pages you want to display images with <Image filename="image_file_name.png" alt="image_file_name" /> .

Then boom🎉, you succeed to call an image component!

It's recommended to set the `quality` for preventing blury images showing up.

The data structure could be differenet depends on your environments but hope this helps you to get the idea to through out from what you're trapped.

Summary

The best thing from making gatsby-image as a component to display images is, you only need to call wherever you want after once you figure out to create into a component.

You can write same as when you write JSX or even HTML when you call.

All you need to state when you call this image component is, just write the image file name and the alt attribute value.

I don't think there's nothing could be easier than that 🍵.

Gatsby's image is probably the first thing you face to scratch your head a few times.

For me, making as a component is the best among from what I've tried.

Hope this article helped you!

Tschüß