gatsbyjs · Jan 12, 2021 · Jan 12, 2021 · Jan 13, 2021 · Jan 13, 2021 · Jan 13, 2021
diff --git a/e2e-tests/path-prefix/cypress/integration/path-prefix.js b/e2e-tests/path-prefix/cypress/integration/path-prefix.js
@@ -11,6 +11,26 @@ describe(`Production pathPrefix`, () => {
     cy.location(`pathname`).should(`eq`, withTrailingSlash(pathPrefix))
   })
 
+  it(`renders static image`, () => {
+    cy.getTestElement(`static-image`)
+      .should(`have.attr`, `srcset`)
+      .and(srcset => {
+        srcset.split(/\s*,\s*/).forEach(part => {
+          expect(part).to.contain(`/blog`)
+        })
+      })
+  })
+
+  it(`renders dynamic image`, () => {
+    cy.getTestElement(`gatsby-image`)
+      .should(`have.attr`, `srcset`)
+      .and(srcset => {
+        srcset.split(/\s*,\s*/).forEach(part => {
+          expect(part).to.contain(`/blog`)
+        })
+      })
+  })
+
   describe(`navigation`, () => {
     it(`prefixes link with /blog`, () => {
       cy.getTestElement(`page-2-link`)

diff --git a/e2e-tests/path-prefix/gatsby-config.js b/e2e-tests/path-prefix/gatsby-config.js
@@ -21,8 +21,15 @@ module.exports = {
         icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
       },
     },
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        path: `${__dirname}/src/images/`,
+      },
+    },
     `gatsby-plugin-sitemap`,
     `gatsby-plugin-sharp`,
+    `gatsby-transformer-sharp`,
     `gatsby-plugin-image`,
     {
       resolve: `gatsby-plugin-feed`,

diff --git a/e2e-tests/path-prefix/package.json b/e2e-tests/path-prefix/package.json
@@ -7,12 +7,14 @@
     "cypress": "^3.1.0",
     "gatsby": "^2.3.34",
     "gatsby-plugin-feed": "^2.1.2",
-    "gatsby-plugin-image": "~1.0.0",
+    "gatsby-plugin-image": "^0.4.0",
     "gatsby-plugin-manifest": "^2.0.17",
     "gatsby-plugin-offline": "^2.0.23",
     "gatsby-plugin-react-helmet": "^3.0.6",
     "gatsby-plugin-sharp": "^2.0.37",
     "gatsby-plugin-sitemap": "^2.0.12",
+    "gatsby-source-filesystem": "^2.8.1",
+    "gatsby-transformer-sharp": "^2.9.0",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
     "react-helmet": "^5.2.0"

diff --git a/e2e-tests/path-prefix/src/images/citrus-fruits.jpg b/e2e-tests/path-prefix/src/images/citrus-fruits.jpg
diff --git a/e2e-tests/path-prefix/src/pages/index.js b/e2e-tests/path-prefix/src/pages/index.js
@@ -1,38 +1,57 @@
 import * as React from "react"
-import { Link, navigate } from "gatsby"
-import { StaticImage } from "gatsby-plugin-image"
+import { Link, navigate, graphql } from "gatsby"
+import { StaticImage, GatsbyImage, getImage } from "gatsby-plugin-image"
 
 import Layout from "../components/layout"
 
-const IndexPage = () => (
-  <Layout>
-    <h1>Hi people</h1>
-    <StaticImage
-      src="../images/gatsby-icon.png"
-      alt="Gatsby icon"
-      layout="fixed"
-    />
-    <p>Welcome to your new Gatsby site.</p>
-    <p>Now go build something great.</p>
-    <Link data-testid="page-2-link" to="/page-2/">
-      Go to page 2
-    </Link>
-    <Link data-testid="page-blogtest-link" to="/blogtest/">
-      Go to blogtest
-    </Link>
-    <button
-      data-testid="page-2-button-link"
-      onClick={() => navigate(`/page-2/`)}
-    >
-      Go to page 2 with navigate()
-    </button>
-    <Link data-testid="404-link" to="/not-existing-page">
-      Go to not existing page
-    </Link>
-    <Link data-testid="subdir-link" to="subdirectory/page-1">
-      Go to subdirectory
-    </Link>
-  </Layout>
-)
+const IndexPage = ({ data }) => {
+  const image = getImage(data.file)
+  return (
+    <Layout>
+      <h1>Hi people</h1>
+      <StaticImage
+        src="../images/gatsby-icon.png"
+        alt="Gatsby icon"
+        layout="fixed"
+        data-testid="static-image"
+      />
+      <GatsbyImage
+        image={image}
+        alt="Citrus Fruits"
+        data-testid="gatsby-image"
+      />
+      <p>Welcome to your new Gatsby site.</p>
+      <p>Now go build something great.</p>
+      <Link data-testid="page-2-link" to="/page-2/">
+        Go to page 2
+      </Link>
+      <Link data-testid="page-blogtest-link" to="/blogtest/">
+        Go to blogtest
+      </Link>
+      <button
+        data-testid="page-2-button-link"
+        onClick={() => navigate(`/page-2/`)}
+      >
+        Go to page 2 with navigate()
+      </button>
+      <Link data-testid="404-link" to="/not-existing-page">
+        Go to not existing page
+      </Link>
+      <Link data-testid="subdir-link" to="subdirectory/page-1">
+        Go to subdirectory
+      </Link>
+    </Layout>
+  )
+}
+
+export const query = graphql`
+  query {
+    file(relativePath: { eq: "citrus-fruits.jpg" }) {
+      childImageSharp {
+        gatsbyImageData
+      }
+    }
+  }
+`
 
 export default IndexPage
diff --git a/packages/gatsby-admin/CHANGELOG.md b/packages/gatsby-admin/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.6.2](https://github.com/gatsbyjs/gatsby/compare/gatsby-admin@0.6.1...gatsby-admin@0.6.2) (2021-01-13)
+
+**Note:** Version bump only for package gatsby-admin
+
 ## [0.6.1](https://github.com/gatsbyjs/gatsby/compare/gatsby-admin@0.6.0...gatsby-admin@0.6.1) (2021-01-06)
 
 ### Bug Fixes

diff --git a/packages/gatsby-admin/package.json b/packages/gatsby-admin/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gatsby-admin",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "main": "index.js",
   "author": "Max Stoiber",
   "license": "MIT",
@@ -20,7 +20,7 @@
     "@typescript-eslint/parser": "^2.34.0",
     "csstype": "^2.6.13",
     "formik": "^2.2.5",
-    "gatsby": "^2.30.1",
+    "gatsby": "^2.30.2",
     "gatsby-interface": "^0.0.225",
     "gatsby-plugin-typescript": "^2.10.0",
     "gatsby-plugin-webfonts": "^1.1.3",

diff --git a/packages/gatsby-cli/CHANGELOG.md b/packages/gatsby-cli/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.17.1](https://github.com/gatsbyjs/gatsby/compare/gatsby-cli@2.17.0...gatsby-cli@2.17.1) (2021-01-13)
+
+**Note:** Version bump only for package gatsby-cli
+
 # [2.17.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-cli@2.17.0-next.5...gatsby-cli@2.17.0) (2021-01-05)
 
 **Note:** Version bump only for package gatsby-cli

diff --git a/packages/gatsby-cli/package.json b/packages/gatsby-cli/package.json
@@ -1,7 +1,7 @@
 {
   "name": "gatsby-cli",
   "description": "Gatsby command-line interface for creating new sites and running Gatsby commands",
-  "version": "2.17.0",
+  "version": "2.17.1",
   "author": "Kyle Mathews <mathews.kyle@gmail.com>",
   "bin": {
     "gatsby": "cli.js"
@@ -25,8 +25,8 @@
     "fs-exists-cached": "^1.0.0",
     "fs-extra": "^8.1.0",
     "gatsby-core-utils": "^1.8.0",
-    "gatsby-recipes": "^0.7.0",
-    "gatsby-telemetry": "^1.8.0",
+    "gatsby-recipes": "^0.7.1",
+    "gatsby-telemetry": "^1.8.1",
     "hosted-git-info": "^3.0.6",
     "is-valid-path": "^0.1.1",
     "lodash": "^4.17.20",

diff --git a/packages/gatsby-plugin-image/CHANGELOG.md b/packages/gatsby-plugin-image/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.5.1](https://github.com/gatsbyjs/gatsby/compare/gatsby-plugin-image@0.5.0...gatsby-plugin-image@0.5.1) (2021-01-13)
+
+**Note:** Version bump only for package gatsby-plugin-image
+
 # [0.5.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-plugin-image@0.5.0-next.6...gatsby-plugin-image@0.5.0) (2021-01-05)
 
 ### Bug Fixes

diff --git a/packages/gatsby-plugin-image/package.json b/packages/gatsby-plugin-image/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gatsby-plugin-image",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "scripts": {
     "build": "npm-run-all -s clean -p build:*",
     "build:gatsby-node": "tsc --jsx react --downlevelIteration true --skipLibCheck true --esModuleInterop true --outDir dist/ src/gatsby-node.ts src/babel-plugin-parse-static-images.ts src/resolver-utils.ts src/types.d.ts",

diff --git a/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx b/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx
@@ -17,6 +17,7 @@ import {
 import { PlaceholderProps } from "./placeholder"
 import { MainImageProps } from "./main-image"
 import { Layout } from "../image-utils"
+import { getSizer } from "./layout-wrapper"
 
 // eslint-disable-next-line @typescript-eslint/interface-name-prefix
 export interface GatsbyImageProps
@@ -193,6 +194,8 @@ export const GatsbyImageHydrator: FunctionComponent<GatsbyImageProps> = function
     props,
   ])
 
+  const sizer = getSizer(layout, width, height)
+
   return (
     <Type
       {...wrapperProps}
@@ -203,7 +206,9 @@ export const GatsbyImageHydrator: FunctionComponent<GatsbyImageProps> = function
       }}
       className={`${wClass}${className ? ` ${className}` : ``}`}
       ref={root}
-      dangerouslySetInnerHTML={{ __html: `` }}
+      dangerouslySetInnerHTML={{
+        __html: sizer,
+      }}
       suppressHydrationWarning
     />
   )

diff --git a/packages/gatsby-plugin-image/src/components/layout-wrapper.tsx b/packages/gatsby-plugin-image/src/components/layout-wrapper.tsx
@@ -39,6 +39,23 @@ if (hasNativeLazyLoadSupport) {
   />
 )
 
+export function getSizer(
+  layout: Layout,
+  width: number,
+  height: number
+): string {
+  let sizer: string | null = null
+  if (layout === `fluid`) {
+    sizer = `<div aria-hidden="true" style="padding-top: ${
+      (height / width) * 100
+    }%;"></div>`
+  }
+  if (layout === `constrained`) {
+    sizer = `<div style="max-width: ${width}px; display: block;"><img alt="" role="presentation" aria-hidden="true" src="data:image/svg+xml;charset=utf-8,%3Csvg height='${height}' width='${width}' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3C/svg%3E" style="max-width: 100%; display: block; position: static;"></div>`
+  }
+  return sizer
+}
+
 export const LayoutWrapper: FunctionComponent<ILayoutWrapperProps> = function LayoutWrapper({
   layout,
   width,
@@ -68,7 +85,6 @@ export const LayoutWrapper: FunctionComponent<ILayoutWrapperProps> = function La
       </div>
     )
   }
-
   return (
     <Fragment>
       {sizer}

diff --git a/packages/gatsby-plugin-page-creator/CHANGELOG.md b/packages/gatsby-plugin-page-creator/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.8.1](https://github.com/gatsbyjs/gatsby/compare/gatsby-plugin-page-creator@2.8.0...gatsby-plugin-page-creator@2.8.1) (2021-01-13)
+
+**Note:** Version bump only for package gatsby-plugin-page-creator
+
 # [2.8.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-plugin-page-creator@2.8.0-next.2...gatsby-plugin-page-creator@2.8.0) (2021-01-05)
 
 **Note:** Version bump only for package gatsby-plugin-page-creator

diff --git a/packages/gatsby-plugin-page-creator/package.json b/packages/gatsby-plugin-page-creator/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gatsby-plugin-page-creator",
-  "version": "2.8.0",
+  "version": "2.8.1",
   "description": "Gatsby plugin that automatically creates pages from React components in specified directories",
   "main": "index.js",
   "scripts": {
@@ -29,7 +29,7 @@
     "chokidar": "^3.4.2",
     "fs-exists-cached": "^1.0.0",
     "gatsby-page-utils": "^0.7.0",
-    "gatsby-telemetry": "^1.8.0",
+    "gatsby-telemetry": "^1.8.1",
     "globby": "^11.0.1",
     "lodash": "^4.17.20"
   },

diff --git a/packages/gatsby-plugin-sharp/CHANGELOG.md b/packages/gatsby-plugin-sharp/CHANGELOG.md
@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.12.1](https://github.com/gatsbyjs/gatsby/compare/gatsby-plugin-sharp@2.12.0...gatsby-plugin-sharp@2.12.1) (2021-01-13)
+
+### Bug Fixes
+
+- **gatsby-plugin-sharp:** PathPrefix isn't being passed/set for GatsbyImage ([#28845](https://github.com/gatsbyjs/gatsby/issues/28845)) ([#28991](https://github.com/gatsbyjs/gatsby/issues/28991)) ([c762050](https://github.com/gatsbyjs/gatsby/commit/c76205061e83d372bc205690ea1b970273f673dc))
+
 # [2.12.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-plugin-sharp@2.12.0-next.6...gatsby-plugin-sharp@2.12.0) (2021-01-05)
 
 ### Bug Fixes

diff --git a/packages/gatsby-plugin-sharp/package.json b/packages/gatsby-plugin-sharp/package.json
@@ -1,7 +1,7 @@
 {
   "name": "gatsby-plugin-sharp",
   "description": "Wrapper of the Sharp image manipulation library for Gatsby plugins",
-  "version": "2.12.0",
+  "version": "2.12.1",
   "author": "Kyle Mathews <mathews.kyle@gmail.com>",
   "bugs": {
     "url": "https://github.com/gatsbyjs/gatsby/issues"
@@ -12,7 +12,7 @@
     "bluebird": "^3.7.2",
     "fs-extra": "^9.0.1",
     "gatsby-core-utils": "^1.8.0",
-    "gatsby-telemetry": "^1.8.0",
+    "gatsby-telemetry": "^1.8.1",
     "got": "^10.7.0",
     "imagemin": "^7.0.1",
     "imagemin-mozjpeg": "^9.0.0",
@@ -33,7 +33,7 @@
     "@types/sharp": "^0.26.1",
     "babel-preset-gatsby-package": "^0.10.0",
     "cross-env": "^7.0.3",
-    "gatsby-plugin-image": "^0.5.0"
+    "gatsby-plugin-image": "^0.5.1"
   },
   "homepage": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sharp#readme",
   "keywords": [

diff --git a/packages/gatsby-plugin-sharp/src/image-data.ts b/packages/gatsby-plugin-sharp/src/image-data.ts
@@ -200,7 +200,9 @@ export async function generateImageData({
       toFormat: primaryFormat,
     })
 
-    if (pathPrefix) transform.pathPrefix = pathPrefix
+    if (pathPrefix) {
+      transform.pathPrefix = pathPrefix
+    }
     return transform
   })
 
@@ -256,6 +258,9 @@ export async function generateImageData({
         height: Math.round(width / imageSizes.aspectRatio),
         toFormat: `avif`,
       })
+      if (pathPrefix) {
+        transform.pathPrefix = pathPrefix
+      }
       return transform
     })
 
@@ -285,6 +290,9 @@ export async function generateImageData({
         height: Math.round(width / imageSizes.aspectRatio),
         toFormat: `webp`,
       })
+      if (pathPrefix) {
+        transform.pathPrefix = pathPrefix
+      }
       return transform
     })
 

diff --git a/packages/gatsby-recipes/CHANGELOG.md b/packages/gatsby-recipes/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.7.1](https://github.com/gatsbyjs/gatsby/compare/gatsby-recipes@0.7.0...gatsby-recipes@0.7.1) (2021-01-13)
+
+**Note:** Version bump only for package gatsby-recipes
+
 # [0.7.0](https://github.com/gatsbyjs/gatsby/compare/gatsby-recipes@0.7.0-next.2...gatsby-recipes@0.7.0) (2021-01-05)
 
 **Note:** Version bump only for package gatsby-recipes