how to use gatsby image with list of image file paths

[cyrfer]

Summary

How can I use file paths from page data query to render a list of components with unique images?

All the examples I can find assume a hard-coded path in the graphql for the image file, e.g. https://github.com/gatsbyjs/gatsby/blob/master/examples/using-gatsby-image/src/pages/index.js#L109 and this: https://codebushi.com/using-gatsby-image/

Relevant information

I want to have an image in each product component. I want to benefit from Gatsby's offline processing using the gatsby-image <Img > component.

My data looks like this:

[{
    "id": "822f39db-a3db-4006-b525-bba8103fc461",
    "image": "IMG_20190130_112251757.jpg",
    "slug": "cocoa-rose-everywhere-balm",
    "name": "Cocoa Rose Everywhere Balm"
}, {
    "id": "421776cd-95d0-4d47-8982-89ee54b7e8a8",
    "image": "IMG_20190130_112120637.jpg",
    "slug": "honey-jasmine-everywhere-balm",
    "name": "Honey Jasmine Everywhere Balm"
}, {
    "id": "9afe100e-8f80-4162-acdd-e21fc6f60b2a",
    "image": "IMG_20190130_112214741.jpg",
    "slug": "rose-heart-everywhere-balm",
    "name": "Rose Heart Everywhere Balm"
}]

I use the json transformer plugin to get my data from a static json file. I can .map over an array of product objects to make a list of components appear. I do not know how to use the Img component with my data.

I think I need to know how to do a different kind of GraphQL query other than a StaticQuery.

Here is my page code:

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

import Layout from "../components/layout"
import SEO from "../components/seo"

import Typography from '@material-ui/core/Typography';
import Grid from '@material-ui/core/Grid';
import SectionView from '../components/section-view';

const ProductView = ({id, image, name, slug}={}) => {
//  console.log('product: ', image)
  return (
<Link to={'/products/' + slug} className="product-tile-container">
  <h2>{name}</h2>
  <Img srcs={...what to put here?...} />
</Link>
  )
}

export default ({data}) => {
  console.log('--data', data)
  return (
  <Layout>
    <SEO title={data.site.siteMetadata.title} keywords={data.site.siteMetadata.keywords} />
    <Typography component="h1" variant="subtitle1">{data.site.siteMetadata.tagLine}</Typography>
    <SectionView title={'Products'}>
      {data.allProductsJson.edges.map(({node}) => (
        <Grid key={node.id} item>
          <ProductView {...{...node}} />
        </Grid>
      ))}
    </SectionView>
  </Layout>
)}

export const query = graphql`
query {
    site {
      siteMetadata {
        title
        description
        tagLine
        keywords
      }
    }

    allProductsJson {
      edges {
        node {
          id
          image // should I change from this filepath?
          slug
          name
        }
      }
    }
}
`

Environment (if relevant)

System: OS: macOS High Sierra 10.13.6 CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz Shell: 3.2.57 - /bin/bash Binaries: Node: 11.8.0 - ~/.nvm/versions/node/v11.8.0/bin/node npm: 6.5.0 - ~/.nvm/versions/node/v11.8.0/bin/npm Languages: Python: 2.7.10 - /usr/bin/python Browsers: Chrome: 72.0.3626.109 Safari: 12.0.1 npmPackages: gatsby: ^2.1.17 => 2.1.17 gatsby-image: ^2.0.29 => 2.0.29 gatsby-plugin-manifest: ^2.0.19 => 2.0.19 gatsby-plugin-offline: ^2.0.24 => 2.0.24 gatsby-plugin-react-helmet: ^3.0.6 => 3.0.6 gatsby-plugin-sharp: ^2.0.22 => 2.0.22 gatsby-source-filesystem: ^2.0.22 => 2.0.22 gatsby-transformer-json: ^2.1.8 => 2.1.8 gatsby-transformer-sharp: ^2.1.14 => 2.1.14

File contents (if changed)

gatsby-config.js:

plugins: [
    `gatsby-transformer-json`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `data`,
        path: `${__dirname}/src/data/`,
        ignore: [`**/\.*`], // ignore files starting with a dot
      },
    },
   ...lots more...
]

package.json: N/A gatsby-node.js: N/A gatsby-browser.js: N/A gatsby-ssr.js: N/A

[jonniebigodes]

@cyrfer see here and here if it helps

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!