Can't .map with StaticImage

[pmarxbraun]

Description

I'm declaring local variables in scope of the file as explained in the doc

function PremurBasCarbone({ data }) {
const points = [
    {
      title: "Réduction de 42% des émissions de CO2",
      img: "../../img/main_planete_verte.JPG",
    },
    {
      title: "Rmur = jusqu’à 9,5 m2.K/W",
      img: "../../img/immeuble_feuille.JPG",
    }
  ]
my return here ....
}

When I want to map in the return like this

{points.map((point, i) => (
              <div
                key={i}
                className="cards text-center"
                style={{ flex: "0 0 200px" }}
              >
                <StaticImage src={point.img} height="50" />
                <p>{point.title}</p>
              </div>
            ))}

it throws me
Error extracting property "src" from StaticImage component. and I don't get why...
Can't we map StaticImage comp ?

Expected result

StaticImage component with correct working src attributes.

Actual result

Error extracting property "src" from StaticImage component.

Environment

  System:
    OS: macOS Mojave 10.14.6
    CPU: (4) x64 Intel(R) Core(TM) i5-3210M CPU @ 2.50GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 14.15.0 - ~/.nvm/versions/node/v14.15.0/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v14.15.0/bin/yarn
    npm: 7.14.0 - ~/.nvm/versions/node/v14.15.0/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 91.0.4472.77
    Safari: 14.1
  npmPackages:
    gatsby: ^3.2.0 => 3.4.2 
    gatsby-background-image: ^1.5.0 => 1.5.3 
    gatsby-image: ^3.2.0 => 3.4.0 
    gatsby-plugin-google-tagmanager: ^3.2.0 => 3.4.0 
    gatsby-plugin-image: ^1.6.0 => 1.6.0 
    gatsby-plugin-manifest: ^3.2.0 => 3.4.0 
    gatsby-plugin-mdx: ^2.2.0 => 2.4.0 
    gatsby-plugin-offline: ^4.2.0 => 4.4.0 
    gatsby-plugin-react-helmet: ^4.2.0 => 4.4.0 
    gatsby-plugin-robots-txt: ^1.5.5 => 1.5.6 
    gatsby-plugin-sharp: ^3.2.0 => 3.4.2 
    gatsby-plugin-sharp-exif: ^1.0.4 => 1.0.4 
    gatsby-plugin-sitemap: ^3.2.0 => 3.3.0 
    gatsby-remark-images: ^4.2.0 => 4.2.0 
    gatsby-source-filesystem: ^3.2.0 => 3.4.0 
    gatsby-transformer-remark: ^3.2.0 => 3.2.0 
    gatsby-transformer-sharp: ^3.2.0 => 3.4.0 
  npmGlobalPackages:
    gatsby-cli: 3.6.0
```

[LekoArts]

You can't use that syntax as it's currently not supported. For mapping over the images you'd need to query them with GraphQL and use <GatsbyImage />.

One could (probably) implement this by sending in a PR to https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-image/src/babel-plugin-parse-static-images.ts

[Mario8419]

@LekoArts
Any news on mapping over for StaticImage? I don't understand why it isn't working with more images.

[Mario8419]

in my case i do have different urls for my StaticImages, which I'm getting from a database, so I can't query them with GraphQL and GatsbyImage, isn't it?

[Histamina]

Same issue here. Currently querying images with wpgraphql and retrieving sourceUrls. When I want to .map() them with the StaticImage, doesn't work.