fix(gatsby-plugin-sharp): PathPrefix isn't being passed/set for GatsbyImage (#28845) (#28991)

* fix for path-prefix in GatsbyImage

* add e2e test for path prefix cases

* update tests

* forgot to save

* refactor

* add curlys

(cherry picked from commit 5874414)

Co-authored-by: LB <[email protected]>

Author: GatsbyJS Bot

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`)

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`,

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"

e2e-tests/path-prefix/src/images/citrus-fruits.jpg

@@ -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

e2e-tests/path-prefix/src/pages/index.js

@@ -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
     })
 

packages/gatsby-plugin-sharp/src/image-data.ts

@@ -510,7 +510,6 @@ const imageNodeType = ({
     },
     resolve: async (image, fieldArgs, context) => {
       const file = getNodeAndSavePathDependency(image.parent, context.path)
-      const args = { ...fieldArgs, pathPrefix }
 
       if (!generateImageData) {
         reporter.warn(`Please upgrade gatsby-plugin-sharp`)
@@ -525,7 +524,8 @@ const imageNodeType = ({
       }
       const imageData = await generateImageData({
         file,
-        args,
+        args: fieldArgs,
+        pathPrefix,
         reporter,
         cache,
       })