Fix image loader file emission path for edge runtime

packages/next/src/build/webpack-config.ts

@@ -2124,8 +2124,8 @@ export default async function getBaseWebpackConfig(
                   not: [new RegExp(WEBPACK_RESOURCE_QUERIES.metadata)],
                 },
                 options: {
-                  isServer: isNodeServer || isEdgeServer,
                   isDev: dev,
+                  compilerType,
                   basePath: config.basePath,
                   assetPrefix: config.assetPrefix,
                 },

packages/next/src/build/webpack/loaders/next-image-loader/index.ts

@@ -1,9 +1,12 @@
+import type { CompilerNameValues } from '../../../../shared/lib/constants'
+
+import path from 'path'
 import loaderUtils from 'next/dist/compiled/loader-utils3'
 import { getImageSize } from '../../../../server/image-optimizer'
 import { getBlurImage } from './blur'
 
 interface Options {
-  isServer: boolean
+  compilerType: CompilerNameValues
   isDev: boolean
   assetPrefix: string
   basePath: string
@@ -13,7 +16,7 @@ function nextImageLoader(this: any, content: Buffer) {
   const imageLoaderSpan = this.currentTraceSpan.traceChild('next-image-loader')
   return imageLoaderSpan.traceAsyncFn(async () => {
     const options: Options = this.getOptions()
-    const { isServer, isDev, assetPrefix, basePath } = options
+    const { compilerType, isDev, assetPrefix, basePath } = options
     const context = this.rootContext
 
     const opts = { context, content }
@@ -63,14 +66,18 @@ function nextImageLoader(this: any, content: Buffer) {
         })
       )
 
-    if (isServer) {
+    if (compilerType === 'client') {
+      this.emitFile(interpolatedName, content, null)
+    } else {
       this.emitFile(
-        `../${isDev ? '' : '../'}${interpolatedName}`,
+        path.join(
+          '..',
+          isDev || compilerType === 'edge-server' ? '' : '..',
+          interpolatedName
+        ),
         content,
         null
       )
-    } else {
-      this.emitFile(interpolatedName, content, null)
     }
 
     return `export default ${stringifiedData};`

test/integration/next-image-new/default/pages/edge.js

@@ -0,0 +1,16 @@
+import Image from 'next/image'
+
+import profilePic from '../public/small.jpg'
+
+export const runtime = 'experimental-edge'
+
+function About() {
+  return (
+    <>
+      <h1>edge</h1>
+      <Image src={profilePic} alt="Picture of the author in edge runtime" />
+    </>
+  )
+}
+
+export default About

test/integration/next-image-new/default/test/index.test.ts

@@ -17,7 +17,8 @@ import {
 } from 'next-test-utils'
 import webdriver from 'next-webdriver'
 import { join } from 'path'
-import { existsSync } from 'fs'
+import fs from 'fs/promises'
+import { pathExists } from 'fs-extra'
 
 const appDir = join(__dirname, '../')
 
@@ -1051,7 +1052,7 @@ function runTests(mode) {
     //server-only tests
     it('should not create an image folder in server/chunks', async () => {
       expect(
-        existsSync(join(appDir, '.next/server/chunks/static/media'))
+        await pathExists(join(appDir, '.next/server/chunks/static/media'))
       ).toBeFalsy()
     })
     it('should render as unoptimized with missing src prop', async () => {
@@ -1300,6 +1301,13 @@ function runTests(mode) {
       const computedHeight = await getComputed(browser, id, 'height')
       expect(getRatio(computedHeight, computedWidth)).toBeCloseTo(0.75, 1)
     })
+
+    it('should create images folder in static/media for edge runtime', async () => {
+      const files = await fs.readdir(join(appDir, '.next/static/media'))
+      expect(files).toEqual(
+        expect.arrayContaining([expect.stringMatching(/small\.\w+\.jpg/)])
+      )
+    })
   }
 
   it('should have blurry placeholder when enabled', async () => {