{"action":"created","issue":{"url":"https://api.github.com/repos/gatsbyjs/gatsby/issues/3380","repository_url":"https://api.github.com/repos/gatsbyjs/gatsby","labels_url":"https://api.github.com/repos/gatsbyjs/gatsby/issues/3380/labels{/name}","comments_url":"https://api.github.com/repos/gatsbyjs/gatsby/issues/3380/comments","events_url":"https://api.github.com/repos/gatsbyjs/gatsby/issues/3380/events","html_url":"https://github.com/gatsbyjs/gatsby/issues/3380","id":285327413,"number":3380,"title":"What's the best way to add dynamic images in page components?","user":{"login":"melissamcewen","id":1251094,"avatar_url":"https://avatars3.githubusercontent.com/u/1251094?v=4","gravatar_id":"","url":"https://api.github.com/users/melissamcewen","html_url":"https://github.com/melissamcewen","followers_url":"https://api.github.com/users/melissamcewen/followers","following_url":"https://api.github.com/users/melissamcewen/following{/other_user}","gists_url":"https://api.github.com/users/melissamcewen/gists{/gist_id}","starred_url":"https://api.github.com/users/melissamcewen/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/melissamcewen/subscriptions","organizations_url":"https://api.github.com/users/melissamcewen/orgs","repos_url":"https://api.github.com/users/melissamcewen/repos","events_url":"https://api.github.com/users/melissamcewen/events{/privacy}","received_events_url":"https://api.github.com/users/melissamcewen/received_events","type":"User","site_admin":false},"labels":[{"id":214544677,"url":"https://api.github.com/repos/gatsbyjs/gatsby/labels/question","name":"question","color":"cc317c","default":true}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2018-01-01T20:32:23Z","updated_at":"2018-04-10T15:15:33Z","closed_at":null,"author_association":"CONTRIBUTOR","body":"I've been building a site that primarily uses Page components and was wondering about guidance on best practices for images when you have:\r\n\r\n* Pages based on page components\r\n* Want to have optimized images on the page that I can resize/format in code\r\n\r\nI'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.\r\nBasically I've been using\r\n* gatsby-image\r\n* gatsby-transformer-sharp\r\n* gatsby-plugin-sharp\r\n* gatsby-source-filesystem\r\n\r\nI 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)\r\n```jsx\r\nexport const query = graphql`\r\n  query indexQuery {\r\n    fileName:file(relativePath: { eq: \"images/myimage.jpg\" }) {\r\n      childImageSharp {\r\n        resolutions(width: 400) {\r\n          ...GatsbyImageSharpResolutions\r\n        }\r\n      }\r\n    }\r\n  }\r\n`;\r\n```\r\n\r\nI then can use the \"fragment\" ( like \"...GatsbyImageSharpResolutions\") in gatsby-image\r\n```jsx\r\nimport Img from 'gatsby-image'\r\nconst imagePage = ({ data }) => {\r\n  <Img resolutions={data.fileName.childImageSharp.resolutions} />\r\n}\r\n```"},"comment":{"url":"https://api.github.com/repos/gatsbyjs/gatsby/issues/comments/380138346","html_url":"https://github.com/gatsbyjs/gatsby/issues/3380#issuecomment-380138346","issue_url":"https://api.github.com/repos/gatsbyjs/gatsby/issues/3380","id":380138346,"user":{"login":"melissamcewen","id":1251094,"avatar_url":"https://avatars3.githubusercontent.com/u/1251094?v=4","gravatar_id":"","url":"https://api.github.com/users/melissamcewen","html_url":"https://github.com/melissamcewen","followers_url":"https://api.github.com/users/melissamcewen/followers","following_url":"https://api.github.com/users/melissamcewen/following{/other_user}","gists_url":"https://api.github.com/users/melissamcewen/gists{/gist_id}","starred_url":"https://api.github.com/users/melissamcewen/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/melissamcewen/subscriptions","organizations_url":"https://api.github.com/users/melissamcewen/orgs","repos_url":"https://api.github.com/users/melissamcewen/repos","events_url":"https://api.github.com/users/melissamcewen/events{/privacy}","received_events_url":"https://api.github.com/users/melissamcewen/received_events","type":"User","site_admin":false},"created_at":"2018-04-10T15:15:33Z","updated_at":"2018-04-10T15:15:33Z","author_association":"CONTRIBUTOR","body":"@nimaiwalsh I have a PR in for some docs on that https://github.com/gatsbyjs/gatsby/pull/4191 on my own site I've been using \"image fragments\" which are like standard queries that format the images for my gallery on my portfolio. Here's my fragments \r\nhttps://github.com/melissamcewen/melissamcewen/blob/master/src/utils/imagefragments.js\r\nand here is an example:\r\nhttps://github.com/melissamcewen/melissamcewen/blob/master/src/pages/portfolio/index.js"}}
{"actor":{"display_login":"melissamcewen"}}