Gatsby GraphyQL File Returns Wrong Image

user_641562 0
Viewed 107

So I am trying to get the image that is defined in my markdown post and when I use GraphQLi, the query works, but in my JS code its returning the wrong image.

import React, { ReactElement } from 'react';
import { useStaticQuery, graphql } from 'gatsby';
import { GatsbyImage } from 'gatsby-plugin-image';

export const Img = (props: { alt: string; src: string }): ReactElement => {
  const { alt, src } = props;

  const imageName = src.split('/').slice(-1)[0];

  const data = useStaticQuery(graphql`
    query GetImage($imageName: String) {
      file(relativePath: { eq: $imageName }) {
        childImageSharp {
          gatsbyImageData
        }
      }
    }
  `);

  console.log(imageName, data.file.childImageSharp.gatsbyImageData);

  return <GatsbyImage alt={alt} image={data.file.childImageSharp.gatsbyImageData} />;
};

The results of the console log

Results of console log

I would expect the office1 image but its returning me the docker image

UPDATE 1:

So I am trying out StaticImage as it seems that the use query is not expecting variables. So I have the following code that still does not render the image at all, not even the alt text

import React, { ReactElement } from 'react';
import { StaticImage } from 'gatsby-plugin-image';

export const Img = (props: { alt: string; src: string }): ReactElement => {
  const { alt, src } = props,
    imageUrl = `../../images/${src}`;

  console.log(imageUrl);
  console.log('----');

  return <StaticImage alt={alt} src={imageUrl} />;
};

Image url logs ../../images/office1.jpg. If I do the following the image renders fine

return <StaticImage alt={alt} src='../../images/office1.jpg' />;
gatsby-image gatsby
1 Answers

Well, you spot all the issues:

  1. StaticQuery (or useStaticQuery) doesn't accept variables (hence the name) so the following snippet will never work:

     const data = useStaticQuery(graphql`
   query GetImage($imageName: String) {
     file(relativePath: { eq: $imageName }) {
       childImageSharp {
        gatsbyImageData
       }
     }
   }
 `);

    From the docs:

    useStaticQuery does not accept variables (hence the name “static”), but can be used in any component, including pages

  2. StaticImage doesn't accept dynamic parameters, it's a known restriction:

    The images are loaded and processed at build time, so there are restrictions on how you pass props to the component. The values need to be statically-analyzed at build time, which means you can’t pass them as props from outside the component, or use the results of function calls, for example. You can either use static values, or variables within the component’s local scope

    So this means that you can't lift or pass any value from props but you can get static/local access to the route:

    This will work:

     export function Image() {
   const source= 'image.png'; 
    return <StaticImage src={source} />
 }

    This won't:

     export function Image(props) {
    return <StaticImage src={props.source} />
 }

Both are known restrictions well documented

So, answering your question, you have 2 options (at least) if you want to use dynamic sources:

  • Use standard <img> tag with a dynamic source
  • Use GatsbyImage along with JavaScript filtering (filter, find, etc) using a page query (not static). Another restriction of page queries is that they only work in top-level components (pages) so the idea is to place there your query and drill drown the images to the component to filter them if needed using JavaScript in the same way that you did with $imageName.
user_55853710
Related