What's the best way to add dynamic images in page components? #3380
Description
I've been building a site that primarily uses Page components and was wondering about guidance on best practices for images when you have:
- Pages based on page components
- Want to have optimized images on the page that I can resize/format in code
I'd be happy to add these to documentation if they seem right. And if not I'd love to learn the best way to do this.
Basically I've been using
- gatsby-image
- gatsby-transformer-sharp
- gatsby-plugin-sharp
- gatsby-source-filesystem
I then query the file I want to use as my image and format it (with resolutions for fixed size, size with images that should stretch)
export const query = graphql`
query indexQuery {
fileName:file(relativePath: { eq: "images/myimage.jpg" }) {
childImageSharp {
resolutions(width: 400) {
...GatsbyImageSharpResolutions
}
}
}
}
`;I then can use the "fragment" ( like "...GatsbyImageSharpResolutions") in gatsby-image
import Img from 'gatsby-image'
const imagePage = ({ data }) => {
<Img resolutions={data.fileName.childImageSharp.resolutions} />
}