Fix image emittion for pure client image (#44831)

Fixes #44068
Fixes #44143
Fixes #44658

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

@@ -115,6 +115,8 @@ function nextImageLoader(this: any, content: Buffer) {
         content,
         null
       )
+    } else {
+      this.emitFile(interpolatedName, content, null)
     }
 
     return `export default ${stringifiedData};`

test/integration/next-image-legacy/default/components/static-img.js

@@ -0,0 +1,12 @@
+import testJPG from '../public/test.jpg'
+import Image from 'next/image'
+
+export default function StaticImg() {
+  return (
+    <Image
+      id="dynamic-loaded-static-jpg"
+      src={testJPG}
+      alt="dynamic-loaded-static-jpg"
+    />
+  )
+}

test/integration/next-image-legacy/default/pages/dynamic-static-img.js

@@ -0,0 +1,13 @@
+import dynamic from 'next/dynamic'
+
+const DynamicStaticImg = dynamic(() => import('../components/static-img'), {
+  ssr: false,
+})
+
+export default () => {
+  return (
+    <div>
+      <DynamicStaticImg />
+    </div>
+  )
+}

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

@@ -4,6 +4,7 @@ import cheerio from 'cheerio'
 import validateHTML from 'html-validator'
 import {
   check,
+  fetchViaHTTP,
   findPort,
   getRedboxHeader,
   hasRedbox,
@@ -1114,6 +1115,14 @@ function runTests(mode) {
     ).toBe('1px 2px')
   })
 
+  it('should emit image for next/dynamic with non ssr case', async () => {
+    let browser = await webdriver(appPort, '/dynamic-static-img')
+    const img = await browser.elementById('dynamic-loaded-static-jpg')
+    const src = await img.getAttribute('src')
+    const { status } = await fetchViaHTTP(appPort, src)
+    expect(status).toBe(200)
+  })
+
   // Tests that use the `unsized` attribute:
   if (mode !== 'dev') {
     it('should correctly rotate image', async () => {

test/integration/next-image-new/default/components/static-img.js

@@ -0,0 +1,12 @@
+import testJPG from '../public/test.jpg'
+import Image from 'next/image'
+
+export default function StaticImg() {
+  return (
+    <Image
+      id="dynamic-loaded-static-jpg"
+      src={testJPG}
+      alt="dynamic-loaded-static-jpg"
+    />
+  )
+}

test/integration/next-image-new/default/pages/dynamic-static-img.js

@@ -0,0 +1,13 @@
+import dynamic from 'next/dynamic'
+
+const DynamicStaticImg = dynamic(() => import('../components/static-img'), {
+  ssr: false,
+})
+
+export default () => {
+  return (
+    <div>
+      <DynamicStaticImg />
+    </div>
+  )
+}

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

@@ -4,6 +4,7 @@ import cheerio from 'cheerio'
 import validateHTML from 'html-validator'
 import {
   check,
+  fetchViaHTTP,
   findPort,
   getRedboxHeader,
   hasRedbox,
@@ -1094,6 +1095,15 @@ function runTests(mode) {
       await getComputedStyle(browser, 'img-blur', 'background-position')
     ).toBe('1px 2px')
   })
+
+  it('should emit image for next/dynamic with non ssr case', async () => {
+    let browser = await webdriver(appPort, '/dynamic-static-img')
+    const img = await browser.elementById('dynamic-loaded-static-jpg')
+    const src = await img.getAttribute('src')
+    const { status } = await fetchViaHTTP(appPort, src)
+    expect(status).toBe(200)
+  })
+
   describe('Fill-mode tests', () => {
     let browser
     beforeAll(async () => {