Sourcing Gatsby-image-data for articles

[LarsEjaas]

I have come across an issue migrating to the new gatsby-plugin-image.

I have a page where all articles are listed an you can then click/unclick the different article labels to sort the articles on the page. This is done internally by comparing by comparing the "frontmatter-field" "tags" to all active tags (each article can have up to 3 tags).
But every article shows a small cover image in the list along with a headline and short description. In the old gatsby image plugin I just used the "frontmatter-field" "coverimage" and passed it to the image component:
Example:

<Img fluid={cover_image} alt={cover_image_alt} />

With the new plugin I need some way to get the image into my article component (it's deeply nested so traversing up to page level and down again would be a pain). I mistakenly thought I could simply do something along the lines of:

<StaticImage  alt="Image alt"  src=`../images/${imageName}`"  />

But the {ImageName} prop won't be available at build time, so this really will not work!

I have used quite a bit of time trying to figure out how to do this with the dynamic GatsbyImage component but I simply can see how this should be done really - without getting really complicated really fast?

Can I somehow "attach" the gatsbyImageData object to every article using gatsby-node.js at buildtime? I have a frontmatter-field on every article with the filename of the image and all images are located in the same folder.

[LarsEjaas]

This is a general problem that I now how encountered several times.

I get the following warnings in the chrome console:

No data found for image "undefined"
              Could not find values for the following props at build time: src

and

No data found for image "undefined"
              Could not find values for the following props at build time: src

I see very little explanation in the documentation about how to handle this? It seems like a lot of overhead and code to handle images really? Not sure how this is an improvement over the previous plugin?

[LekoArts]

The new image plugin is the same as the old plugin in that regard. If you used this in the past:

<Img fluid={cover_image} alt={cover_image_alt} />

Then you'll now use this:

<GatsbyImage image={cover_image} alt={cover_image_alt} />

Your cover_image needs to be in the new shape of course, so not childImageSharp.fluid but childImageSharp.gatsbyImageData

https://www.gatsbyjs.com/docs/reference/release-notes/image-migration-guide

[LarsEjaas]

Hi leko. Thanks for the quick reply!
But {cover_image} is just a string taken from frontmatter of my article. This worked in the old plugin!

Issue is: I have used "source_filesystem" to source a folder with all the article images by name - in the old plugin that worked really well.

I did:
const fluid = allImageSharp.nodes.find( node => node.fluid.originalName === fileName)
.fluid

[LekoArts]

As the syntax changed const fluid = allImageSharp.nodes.find( node => node.fluid.originalName === fileName) .fluid won't continue to work as you have other queries.

But for frontmatter images you shouldn't do this anyways, you should get it in the page query itself.

markdownRemark {
  frontmatter {
     image {
        gatsbyImageData
     }
  }
}

[LarsEjaas]

LekoArts - I struggle to understand how you get to the frontmatter article paired with the image as you suggest?

Let my give you an example:

Right now I have an article written in Markdown with frontmatter in the top:

---
title: Articles coming soon
published: true
description: I am working hard on writing some exciting articles you can read here.
tags: [Intro]
canonical_url: "/en/artikler/artikler-kommer-snart"
cover_image: ejaas_cover.png
cover_image_alt: cover image of the ejaas logo
featured_image: Artikler_kommer_snart_en.png
featured_image_alt: Overview image of the various pages on this website
slug: "/en/artikler/artikler-kommer-snart"
date: "2021-02-26"
updated: "2021-02-26"
author: Lars Ejaas
seo_title: Articles coming soon
seo_description: Articles for this page are under construction. Look forward to exciting web development articles 
seo_image: /SoMe/open_graph_ejaas_logo.png
---

The frontmatterfield "cover_image" is a reference to the filename of the image I need, and I know the folder that it is located in - but I simply do not understand how to get the data when it has to be available at build time??? The documentation has one example and I struggle to understand how this applies to something like this?

[LekoArts]

You're using an absolute path to the image / you just provide the filename. Gatsby can't find the files if you don't point it to it.
This will only work if you have the image in the same spot as the markdown file. If you want absolute paths you'll need to do something like here: https://stackoverflow.com/questions/57152625/use-absolute-path-for-featured-image-in-markdown-post-with-gatsby

[LarsEjaas]

Thanks Leko! This is exactly what I needed to get started! I just really couldn't figure out how this was done in gatsby-node.js - but I will give it a go!