diff --git a/packages/next/src/build/webpack/loaders/next-image-loader.ts b/packages/next/src/build/webpack/loaders/next-image-loader.ts index cc33c6c532a23..29ff5ced3fbfe 100644 --- a/packages/next/src/build/webpack/loaders/next-image-loader.ts +++ b/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};` diff --git a/test/integration/next-image-legacy/default/components/static-img.js b/test/integration/next-image-legacy/default/components/static-img.js new file mode 100644 index 0000000000000..5510e7baccd22 --- /dev/null +++ b/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 ( + dynamic-loaded-static-jpg + ) +} diff --git a/test/integration/next-image-legacy/default/pages/dynamic-static-img.js b/test/integration/next-image-legacy/default/pages/dynamic-static-img.js new file mode 100644 index 0000000000000..ede9456946160 --- /dev/null +++ b/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 ( +
+ +
+ ) +} diff --git a/test/integration/next-image-legacy/default/test/index.test.ts b/test/integration/next-image-legacy/default/test/index.test.ts index cb58ca2e35a03..b336c5a57dc44 100644 --- a/test/integration/next-image-legacy/default/test/index.test.ts +++ b/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 () => { diff --git a/test/integration/next-image-new/default/components/static-img.js b/test/integration/next-image-new/default/components/static-img.js new file mode 100644 index 0000000000000..5510e7baccd22 --- /dev/null +++ b/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 ( + dynamic-loaded-static-jpg + ) +} diff --git a/test/integration/next-image-new/default/pages/dynamic-static-img.js b/test/integration/next-image-new/default/pages/dynamic-static-img.js new file mode 100644 index 0000000000000..ede9456946160 --- /dev/null +++ b/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 ( +
+ +
+ ) +} diff --git a/test/integration/next-image-new/default/test/index.test.ts b/test/integration/next-image-new/default/test/index.test.ts index 0faecb718500c..e3844c4413b38 100644 --- a/test/integration/next-image-new/default/test/index.test.ts +++ b/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 () => {