diff --git a/examples/image-legacy-component/app/background/page.tsx b/examples/image-legacy-component/app/background/page.tsx
index f0a08df543dfa8..4ea722aa9d799f 100644
--- a/examples/image-legacy-component/app/background/page.tsx
+++ b/examples/image-legacy-component/app/background/page.tsx
@@ -5,7 +5,7 @@ import styles from "@/styles/styles.module.css";
 export default function Background() {
   return (
     <div>
-      <ViewSource pathname="pages/background.tsx" />
+      <ViewSource pathname="app/background/page.tsx" />
       <div className={styles.bgWrap}>
         <Image
           alt="Mountains"
diff --git a/examples/image-legacy-component/app/color/page.tsx b/examples/image-legacy-component/app/color/page.tsx
index 01bb22dfade138..518c3367d9156d 100644
--- a/examples/image-legacy-component/app/color/page.tsx
+++ b/examples/image-legacy-component/app/color/page.tsx
@@ -19,7 +19,7 @@ const rgbDataURL = (r: number, g: number, b: number) =>
 export default function Color() {
   return (
     <div>
-      <ViewSource pathname="pages/color.tsx" />
+      <ViewSource pathname="app/color/page.tsx" />
       <h1>Image Component With Color Data URL</h1>
       <Image
         alt="Dog"
diff --git a/examples/image-legacy-component/app/layout-fill/page.tsx b/examples/image-legacy-component/app/layout-fill/page.tsx
index ded080b62493d5..bbd7fd01e8fdff 100644
--- a/examples/image-legacy-component/app/layout-fill/page.tsx
+++ b/examples/image-legacy-component/app/layout-fill/page.tsx
@@ -4,7 +4,7 @@ import ViewSource from "@/components/view-source";
 export default function LayoutFill() {
   return (
     <div>
-      <ViewSource pathname="pages/layout-fill.tsx" />
+      <ViewSource pathname="app/layout-fill/page.tsx" />
       <h1>Image Component With Layout Fill</h1>
       <div style={{ position: "relative", width: "300px", height: "500px" }}>
         <Image
diff --git a/examples/image-legacy-component/app/layout-fixed/page.tsx b/examples/image-legacy-component/app/layout-fixed/page.tsx
index 8756079484fb2e..cabb1730e0736c 100644
--- a/examples/image-legacy-component/app/layout-fixed/page.tsx
+++ b/examples/image-legacy-component/app/layout-fixed/page.tsx
@@ -4,7 +4,7 @@ import ViewSource from "@/components/view-source";
 export default function LayoutFixed() {
   return (
     <div>
-      <ViewSource pathname="pages/layout-fixed.tsx" />
+      <ViewSource pathname="app/layout-fixed/page.tsx" />
       <h1>Image Component With Layout Fixed</h1>
       <Image
         alt="Mountains"
diff --git a/examples/image-legacy-component/app/layout-intrinsic/page.tsx b/examples/image-legacy-component/app/layout-intrinsic/page.tsx
index 2c25244c894bbe..eadaa8bc99b4c4 100644
--- a/examples/image-legacy-component/app/layout-intrinsic/page.tsx
+++ b/examples/image-legacy-component/app/layout-intrinsic/page.tsx
@@ -4,7 +4,7 @@ import ViewSource from "@/components/view-source";
 export default function LayoutIntrinsic() {
   return (
     <div>
-      <ViewSource pathname="pages/layout-intrinsic.tsx" />
+      <ViewSource pathname="app/layout-intrinsic/page.tsx" />
       <h1>Image Component With Layout Intrinsic</h1>
       <Image
         alt="Mountains"
diff --git a/examples/image-legacy-component/app/layout-responsive/page.tsx b/examples/image-legacy-component/app/layout-responsive/page.tsx
index b29acf92e990e1..03c6dec86144e8 100644
--- a/examples/image-legacy-component/app/layout-responsive/page.tsx
+++ b/examples/image-legacy-component/app/layout-responsive/page.tsx
@@ -4,7 +4,7 @@ import ViewSource from "@/components/view-source";
 export default function LayoutResponsive() {
   return (
     <div>
-      <ViewSource pathname="pages/layout-responsive.tsx" />
+      <ViewSource pathname="app/layout-responsive/page.tsx" />
       <h1>Image Component With Layout Responsive</h1>
       <Image
         alt="Mountains"
diff --git a/examples/image-legacy-component/app/page.tsx b/examples/image-legacy-component/app/page.tsx
index a4ab423e9e7e38..448b3276acc683 100644
--- a/examples/image-legacy-component/app/page.tsx
+++ b/examples/image-legacy-component/app/page.tsx
@@ -7,7 +7,7 @@ import styles from "@/styles/styles.module.css";
 export default function Home() {
   return (
     <div className={styles.container}>
-      <ViewSource pathname="pages/index.tsx" />
+      <ViewSource pathname="app/page.tsx" />
       <div className={styles.card}>
         <h1>Image Component with Next.js</h1>
         <p>
diff --git a/examples/image-legacy-component/app/placeholder/page.tsx b/examples/image-legacy-component/app/placeholder/page.tsx
index c861a301cb5f07..fd21d94ea4ac84 100644
--- a/examples/image-legacy-component/app/placeholder/page.tsx
+++ b/examples/image-legacy-component/app/placeholder/page.tsx
@@ -5,7 +5,7 @@ import mountains from "@/public/mountains.jpg";
 export default function Placeholder() {
   return (
     <div>
-      <ViewSource pathname="pages/placeholder.tsx" />
+      <ViewSource pathname="app/placeholder/page.tsx" />
       <h1>Image Component With Placeholder Blur</h1>
       <Image
         alt="Mountains"
diff --git a/examples/image-legacy-component/app/shimmer/page.tsx b/examples/image-legacy-component/app/shimmer/page.tsx
index 76d2972d855709..f6573044f81b6c 100644
--- a/examples/image-legacy-component/app/shimmer/page.tsx
+++ b/examples/image-legacy-component/app/shimmer/page.tsx
@@ -23,7 +23,7 @@ const toBase64 = (str: string) =>
 export default function Shimmer() {
   return (
     <div>
-      <ViewSource pathname="pages/shimmer.tsx" />
+      <ViewSource pathname="app/shimmer/page.tsx" />
       <h1>Image Component With Shimmer Data URL</h1>
       <Image
         alt="Mountains"