Dynamic Image not appearing in React component

Question

I am trying create a component that genrates an image based on the prop that is passed. The component first checks the prop using a switch statement, then sets the path of the image source in the variable path. I know the issue is with the path variable, because if I set the src attribute to an external image source, it works just fine.

I also know that another workaround would be to import all the images using using

import JamaicaFlag from '../images/united-staes.png'
import USFlag from '../images/united-staes.png'

and then

<StaticImage src={USFlage} src={this.props.alt} />

but that wouldn't be an ideal option since it requires importing all the images.

/* Flag.js - Component that returns an image of the flag
 * depending on the country passed in throught props.
 * The prop country is specified by using Alpha-2 code
 */

import * as React from "react"
import { StaticImage } from "gatsby-plugin-image"

class Flag extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    let path = "../images/flags/jamaica.png"
    let style = { width: "30px" }

    switch (this.props.country) {
      case "JM":
        path = "../images/flags/jamaica.png"
        break

      case "TT":
        path = "../images/flags/trinidad.png"
        break

      case "BB":
        path = "../images/flags/barbados.jpeg"
        style = { width: "40px" }
        break

      case "KY":
        path = "../images/flags/cayman-slands.png"
        break

      case "US":
        path = "../images/flags/united-states.png"
        break

      default:
        // Defaults to Jamaica
        path = "../images/flags/jamaica.png"
    }

    return (
      <>
        <StaticImage src={path} alt={this.props.alt} style={style} />
      </>
    )
  }
}

export default Flag

The component is used by simply

<Flag country="US" alt="Switch to US site" />

This also does not work

<StaticImage src={require(path)} alt={this.props.alt} style={style} />

It should look a little something like this

What changes are needed to make this work? Here is the full component file.

Answer 1

You can't use props along with StaticImage. It's a known restriction. From the docs:

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

Basically, because image sources need to be statically analyzed, can't be used out-scoped from the image component itself or from a property.

Since StaticImage is not an option, you can use require to import the image as an asset that webpack can trace using the standard <img> tag:

<img src={require(path)} alt={this.props.alt} style={style} />