August 04, 2019
Before you can add an image to a react component in gatsby, you need to install gatsby-image.
npm install --save gatsby-image
Add the following to your gatsby-config.js:
plugins: [
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/content/assets`,
name: `assets`,
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`
]
Now you get to use it by doing the following:
import Image from "gatsby-image"
export const pageQuery = graphql`
query {
gatsbyIcon: file(absolutePath: { regex: "/gatsby-icon.png/" }) {
childImageSharp {
fixed(width: 50, height: 50) {
...GatsbyImageSharpFixed
}
}
}
}
`
const { data } = this.props;
return (
<Image
fixed={data.gatsbyIcon.childImageSharp.fixed}
/>
);