examples: fix view source pathname at image-legacy-component (#73414)

## Description

#73344 updates the
[image-legacy-component](https://github.com/vercel/next.js/tree/canary/examples/image-legacy-component)
example for using the App Router.
However,
[`ViewSource`](https://github.com/vercel/next.js/blob/canary/examples/image-legacy-component/components/view-source.tsx)
component isn't updated.
Then I update the pathname.

CC: @samcx 

### Adding or Updating Examples

- [x] The "examples guidelines" are followed from our contributing doc
https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md
- [x] Make sure the linting passes by running `pnpm build && pnpm lint`.
See
https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md

Co-authored-by: Sam Ko <[email protected]>

Author: JamBalaya56562

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"

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"

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

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"

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"

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"

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>

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"

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"