src as prop in gatsby-plugin-image issue

Question

Hy everyone,

I need help because I'm struggling using gatsby-plugin-image StaticImage with props ...

I have a component Trailer I'm using with props to get the datas. Everything works fine for all the props like the title, the year etc... except for the src of the StaticImage ...

I have read that StaticImage does not accept props, but it is really confusing for me right now.

Here is the code of the component :

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

function Trailer(props) {
  
  return (
    <div className="trailer">
      <div className="trailer-entry-content">
 
        <StaticImage
          src={props.imageTrailer}
          width={312}
          quality={95}
          placeholder="blurred"
          formats={['AUTO', 'WEBP', 'AVIF']}
          alt="Catlike Productions"
          className="trailer-img"
        />

        <h2 className="trailer-title">{props.title}</h2>
  
      </div>

      <div className="trailer-infos">
        <h3 className="title">{props.title}</h3>
        <div className="year">
          <strong>Year:</strong> {props.year}
        </div>
        <div className="director">
          <strong>Director:</strong> {props.director}
        </div>
        <div className="prod">
          <strong>Production Co:</strong> {props.production}
        </div>
      </div>
    </div>
  );
  // }
}

export default Trailer;

and here is the component where I'm using the Trailer, and where the Query is called :

import React from 'react';
import { useStaticQuery, graphql } from 'gatsby';
import Trailer from './Trailer';

export default function TrailersFiction({ children }) {
  const dataFiction = useStaticQuery(
    graphql`
      query {
        allTrailersXml(
          filter: {
            xmlChildren: {
              elemMatch: {
                content: { eq: "Fiction" }
                name: { eq: "Typesdetrailers" }
              }
            }
          }
        ) {
          edges {
            node {
              id
              xmlChildren {
                name
                content
              }
            }
          }
        }
      }
    `
  );

  const trailerFiction = dataFiction.allTrailersXml.edges;

  return (
    <div id="trailers" className="trailers-content">
      <div className="trailers-cat">
        <h1>Fiction</h1>
      </div>
      <div className="trailers-container">
        {trailerFiction.map(({ node }, index) => (
          <Trailer
            key={index}
            imageTrailer={node.xmlChildren[3].content}
            title={node.xmlChildren[1].content}
            year={node.xmlChildren[8].content}
            production={node.xmlChildren[7].content}
            director={node.xmlChildren[5].content}
          />
        ))}
      </div>
    </div>
  );
}

My query is working fine, it returns a result like this, where the src of the image is in xmlChildren -> content :

{
  "data": {
    "allTrailersXml": {
      "edges": [
        {
          "node": {
            "id": "5086b3a8-547e-50da-9c7a-80ae69541373",
            "xmlChildren": [
              {
                "name": "ID",
                "content": "35"
              },
              {
                "name": "Title",
                "content": "trailer-Partum"
              },
              {
                "name": "Typesdetrailers",
                "content": "Fiction"
              },
              {
                "name": "imagedutrailer",
                "content": "https://catlike-prod.com/wp-content/uploads/2017/01/post-partum.jpg"
              },
              {
                "name": "Trailer",
                "content": "198346812"
              },
              {
                "name": "Director",
                "content": "Delphine Noels"
              },
              {
                "name": "Stars",
                "content": "Mélanie Doutey, Jalil Lespert ..."
              },
              {
                "name": "ProductionCo",
                "content": "Frakas Productions, Juliette Films, Paul Thiltges Distributions"
              },
              {
                "name": "Anne",
                "content": "2013"
              }
            ]
          }
        },

As I said, I get all the datas I need (title, year,production,director) except imageTrailer, which gets the url as a string of the image...

If I console.log({node.xmlChildren[3].content}) for instance, I get : string: 'https://catlike-prod.com/wp-content/uploads/2017/01/post-partum.jpg'

if I use a classic html5 :

it works fine, I get my image rendered

So what do I have to do to fix that in order to use StaticImage? Any help or idea would be much appreciate....

thank you in advance for you help

Answer 1

You are right, <StaticImage>, at least right now, doesn't accept props coming from its parent, as you can see in the gatsby-plugin-image docs:

Restrictions on using StaticImage

There are a few technical restrictions to the way you can pass props into StaticImage. Most importantly, you can’t use any of the parent component’s props. For more information, refer to the Gatsby Image plugin reference guide. If you find yourself wishing you could use a prop passed from a parent for the image src then it’s likely that you should be using a dynamic image.

Extending the documentation's link:

// ⚠️ Doesn't work
export function Logo({ logo }) {
  // You can't use a prop passed into the parent component
  return <StaticImage src={logo}>
}

// ⚠️ Doesn't work
export function Dino() {
    // Props can't come from function calls
    const width = getTheWidthFromSomewhere();
    return <StaticImage src="trex.png" width={width}>
}

So, summarizing, you can't create dynamic images coming from an outer source using <StaticImage> component. If you can download it and upload it to your CMS, you will be able to use dynamic images using <GatsbyImage> component:

 <GatsbyImage image={image} alt={``} />