Gatsby image path from json - json

Question

Edit: Got it working even if it feels kinda wrong this way.. Any ideas to make it possible to only use the filename and not a relative path would be appreciated. Anyway, here is how I got it working:
data.json
[
{
"slug": "bloom",
"name": "Bloom",
"image": {
"src": "../images/socks1.jpg"
}
}
]
Query:
{
allDataJson {
edges {
node {
slug
name
image {
src {
childImageSharp {
fluid {
src
}
}
}
}
}
}
}
}
I am trying to display an image of which the name is stored in data.json and the file itself is in src/images
src/data/data.json
[
{
"slug": "sock1",
"name": "sock1",
"image": "socks1.jpg"
}
]
If instead of the pure filename, I provide a url to any image on the web it works.. Tried getting it to work as follows:
gatsby-config.js
module.exports = {
plugins: [
{
resolve: `gatsby-source-filesystem`,
options: {
name: `data`,
path: `${__dirname}/src/data`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
`gatsby-transformer-json`,
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
],
}
product.js
import React from 'react'
import { graphql } from 'gatsby'
import Layout from '../components/layout'
import get from 'lodash/get'
class ProductPage extends React.Component {
render() {
const products = get(this, 'props.data.allDataJson.edges')
console.log(products)
return (
<Layout>
{products.map(({ node }) => {
return (
<div key={node.name}>
<p>{node.name}</p>
<img src={node.image} />
</div>
)
})}
</Layout>
)
}
}
export default ProductPage
export const productsQuery = graphql`
query {
allDataJson {
edges {
node {
slug
name
image
}
}
}
}
`
All that's being outputted on the frontend is
<img src="socks1.jpg">
If I query for all files in the GraphiQl I get them, but (not sure about this one) I think the image field is just not recognized as file type field (cant query for src etc)
Any pointers would be much appreciated! :)

Answer 1

Your query should similar to this:
export const productsQuery = graphql`
query {
allDataJson {
edges {
node {
slug
name
image{
publicURL
childImageSharp{
fluid {
...GatsbyImageSharpFluid
}
}
}
}
}
}
}
`
Then you can output the path like this:
<img src={node.image.childImageSharp.fluid.src} />
You don't have to use fluid, you use other types of responsive images