diff --git a/example/localTestComponent/ExportedImage.tsx b/example/localTestComponent/ExportedImage.tsx index cc5270d..0fe967f 100644 --- a/example/localTestComponent/ExportedImage.tsx +++ b/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; }; diff --git a/example/pages/nested/page.js b/example/pages/nested/page.js new file mode 100644 index 0000000..dd07792 --- /dev/null +++ b/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 ( +
+

Nested page test

+

Optimized example (static import)

+ +
+ +
+
+ ); +} + +export default Page; diff --git a/example/pages/nestedSlug/[slug].js b/example/pages/nestedSlug/[slug].js new file mode 100644 index 0000000..dfc230f --- /dev/null +++ b/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 ( +
+

Nested slug page test

+

Optimized example (static import)

+ +
+ +
+
+ ); +} + +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; diff --git a/example/test/e2e/imageSizeTest.spec.mjs b/example/test/e2e/imageSizeTest.spec.mjs index d93c4c7..5de2a07 100644 --- a/example/test/e2e/imageSizeTest.spec.mjs +++ b/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, diff --git a/package-lock.json b/package-lock.json index 45c4d9b..016a15b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "next-image-export-optimizer", - "version": "0.14.0", + "version": "0.14.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "next-image-export-optimizer", - "version": "0.14.0", + "version": "0.14.1", "license": "MIT", "dependencies": { "cli-progress": "^3.10.0", diff --git a/package.json b/package.json index d68bf65..1153c14 100644 --- a/package.json +++ b/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", diff --git a/src/ExportedImage.tsx b/src/ExportedImage.tsx index cc5270d..0fe967f 100644 --- a/src/ExportedImage.tsx +++ b/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; };