Ran into trouble migrating to gatsby-plugin-image

[Isaac-Tait]

After migrating to gatsby-plugin-image I had a few small issues that I was able to sort out on my own. However, I have not been able to figure out why my sites logo will no longer render. Here is the code I have for layout.js after running npx gatsby-codemods gatsby-plugin-image:

import React from "react"
import { Link, useStaticQuery, graphql } from "gatsby"

import Navigation from "../components/navigation"
import Slider from "../components/slider"
import { StaticImage } from "gatsby-plugin-image";
import Footer from "../components/footer"
import Pagination from "../templates/blog-pagination"

const Layout = ({ location, children }) => {
  const rootPath = `${__PATH_PREFIX__}/`
  let header

  const data = useStaticQuery(graphql`{
  desktopLogo: file(absolutePath: {regex: "/FfT_Logo_Desktop.png/"}) {
    childImageSharp {
      gatsbyImageData(
        width: 500
        quality: 50
        placeholder: TRACED_SVG
        formats: [AUTO, WEBP, AVIF]
        layout: CONSTRAINED
      )
    }
  }
  mobileLogo: file(absolutePath: {regex: "/FfT_Logo_Mobile.png/"}) {
    childImageSharp {
      gatsbyImageData(
        width: 250
        quality: 100
        placeholder: BLURRED
        formats: [AUTO, WEBP, AVIF]
        layout: CONSTRAINED
      )
    }
  }
}
`)

const logos = [
  data.mobileLogo.childImageSharp.gatsbyImageData,
  {
    ...data.desktopLogo.childImageSharp.gatsbyImageData,
    media: `(min-width: 768px)`
  }
]

  if (location.pathname === rootPath) {
    header = (
      <div class="ml-20 mr-20 mb-2">
        <StaticImage image={logos} alt="Fallfish Tenkara" />
      </div>
    )
  } else {
    header = (
      <div class="ml-20 mr-20 mb-2">
        <Link to={`/`}>
          <StaticImage image={logos} alt="Fallfish Tenkara" />
        </Link>
      </div>
        
    )
  }
  return (
    <div class="flex flex-col">
      <Navigation />
      <header class="pr-2 md:w-2/3">{header}</header>  
        <div class="hidden md:block w-2/3 mx-auto">
          <Slider />
        </div>
      <div class="bg-gray-200 mb-4 w-full lg:w-2/3 mx-auto overflow-hidden rounded-lg shadow-xl">
        <main>{children}</main>
        <Pagination />
      </div>
        <Footer />
    </div>
  )
}

export default Layout

When I run gatsby build I get this error:

No data found for image "undefined"
              undefinedCould not read image data file "/Users/isaactait/Desktop/Web_Dev/gatsby-fallfish-tenkara-blog/.cache/caches/gatsby-plugin-image/2298356842.json". 
This may mean that the images in "/Users/isaactait/Desktop/Web_Dev/gatsby-fallfish-tenkara-blog/src/components/layout.js" were not processed.
Please ensure that your gatsby version is at least 2.24.78.
Image not loaded 

My current version of gatsby is: 2.32.3

What am I missing? I have read over the extensive documentation but so far have not resolved this yet. Any help would be greatly appreciated. Cheers 👍🏼

[LekoArts]

You'll want to use <GatsbyImage /> instead of <StaticImage /> as the latter expects a string to an image, e.g. "./my-image.jpg" while the former expects gatsbyImageData

[Isaac-Tait]

I had it set to GatsbyImage originally but changed it to StaticImage as I thought maybe that was what was causing the issue... I did go back though and set it back to GatsbyImage so I could provide gatsbyImageData and the logo is still not loading...

[Isaac-Tait]

Here is the error message I am getting from Gatsby Cloud:

Building static HTML failed for path /blog/8

For more details see https://gatsby.dev/debug-html

The error occured in fallfish_tenkara/src/components/gatsby-image.server.tsx@71,14

[LekoArts]

On a second look the issue is quite clear: You're using <GatsbyImage /> incorrectly.

It doesn't expect an array of gatsbyImageData but only gatsbyImageData. If you want to have art direction you'll need to use: https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image/#withartdirection

[Isaac-Tait]

You @LekoArts are a rockstar! Thank you very much - this fixed my issue.