Fix static images on nested pages

example/localTestComponent/ExportedImage.tsx

@@ -53,10 +53,6 @@ const generateImageURL = (src: string, width: number) => {
     correctedPath = correctedPath + "/"; // Append a slash to it.
   }
   let generatedImageURL = `${correctedPath}nextImageExportOptimizer/${filename}-opt-${width}.${processedExtension.toUpperCase()}`;
-  // if the generatedImageURL hat a slash at the beginning, we remove it
-  if (generatedImageURL.charAt(0) === "/") {
-    generatedImageURL = generatedImageURL.substr(1);
-  }
 
   return generatedImageURL;
 };

example/pages/nested/page.js

@@ -0,0 +1,29 @@
+import React from "react";
+import ExportedImage from "../../localTestComponent/ExportedImage";
+import testPictureStatic from "../../public/chris-zhang-Jq8-3Bmh1pQ-unsplash_static.jpg";
+
+function Page() {
+  return (
+    <div>
+      <h1>Nested page test</h1>
+      <h2>Optimized example (static import)</h2>
+
+      <div
+        style={{
+          position: "relative",
+          marginBottom: "3rem",
+          width: "100%",
+        }}
+      >
+        <ExportedImage
+          src={testPictureStatic}
+          alt="test_image_static"
+          id="test_image_static"
+          layout="responsive"
+        />
+      </div>
+    </div>
+  );
+}
+
+export default Page;

example/pages/nestedSlug/[slug].js

@@ -0,0 +1,44 @@
+import React from "react";
+import ExportedImage from "../../localTestComponent/ExportedImage";
+import testPictureStatic from "../../public/chris-zhang-Jq8-3Bmh1pQ-unsplash_static.jpg";
+
+function Slug() {
+  return (
+    <div>
+      <h1>Nested slug page test</h1>
+      <h2>Optimized example (static import)</h2>
+
+      <div
+        style={{
+          position: "relative",
+          marginBottom: "3rem",
+          width: "100%",
+        }}
+      >
+        <ExportedImage
+          src={testPictureStatic}
+          alt="test_image_static"
+          id="test_image_static"
+          layout="responsive"
+        />
+      </div>
+    </div>
+  );
+}
+
+export async function getStaticPaths() {
+  return {
+    paths: [{ params: { slug: "page" } }],
+    fallback: false, // can also be true or 'blocking'
+  };
+}
+
+// `getStaticPaths` requires using `getStaticProps`
+export async function getStaticProps() {
+  return {
+    // Passed to the page component as props
+    props: { post: {} },
+  };
+}
+
+export default Slug;

example/test/e2e/imageSizeTest.spec.mjs

@@ -81,6 +81,46 @@ for (let index = 0; index < widths.length; index++) {
 
       expect(image.currentSrc).toBe(correctSrcStaticImage[width.toString()]);
     });
+    test("should check the image size for the statically imported image in the nested route", async ({
+      page,
+    }) => {
+      await page.goto("/nested/page");
+
+      const img = await page.locator("#test_image_static");
+      await img.click();
+
+      const image = await page.evaluate(() => {
+        let img = document.getElementById("test_image_static");
+        return {
+          src: img.src,
+          currentSrc: img.currentSrc,
+          naturalWidth: img.naturalWidth,
+          width: img.width,
+        };
+      });
+
+      expect(image.currentSrc).toBe(correctSrcStaticImage[width.toString()]);
+    });
+    test("should check the image size for the statically imported image in the nested slug route", async ({
+      page,
+    }) => {
+      await page.goto("/nestedSlug/page");
+
+      const img = await page.locator("#test_image_static");
+      await img.click();
+
+      const image = await page.evaluate(() => {
+        let img = document.getElementById("test_image_static");
+        return {
+          src: img.src,
+          currentSrc: img.currentSrc,
+          naturalWidth: img.naturalWidth,
+          width: img.width,
+        };
+      });
+
+      expect(image.currentSrc).toBe(correctSrcStaticImage[width.toString()]);
+    });
 
     test("should check the image size for images in subfolder", async ({
       page,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-image-export-optimizer",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "description": "Optimizes all static images for Next.js static HTML export functionality",
   "main": "dist/ExportedImage.js",
   "types": "dist/ExportedImage.d.ts",

src/ExportedImage.tsx

@@ -53,10 +53,6 @@ const generateImageURL = (src: string, width: number) => {
     correctedPath = correctedPath + "/"; // Append a slash to it.
   }
   let generatedImageURL = `${correctedPath}nextImageExportOptimizer/${filename}-opt-${width}.${processedExtension.toUpperCase()}`;
-  // if the generatedImageURL hat a slash at the beginning, we remove it
-  if (generatedImageURL.charAt(0) === "/") {
-    generatedImageURL = generatedImageURL.substr(1);
-  }
 
   return generatedImageURL;
 };