From 55ec1f6d39ecb2cbf05c60b77196942e1f0c817a Mon Sep 17 00:00:00 2001 From: Diederik Date: Wed, 19 Oct 2022 13:06:05 +0200 Subject: [PATCH 1/4] Imageloader: collect images serverside to include images from staticpaths --- packages/next/build/webpack/loaders/next-image-loader.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/next/build/webpack/loaders/next-image-loader.js b/packages/next/build/webpack/loaders/next-image-loader.js index a2524d510f2fd..a0b8d0f47b5ff 100644 --- a/packages/next/build/webpack/loaders/next-image-loader.js +++ b/packages/next/build/webpack/loaders/next-image-loader.js @@ -91,8 +91,8 @@ function nextImageLoader(content) { }) ) - if (!isServer) { - this.emitFile(interpolatedName, content, null) + if (isServer) { + this.emitFile(`../${interpolatedName}`, content, null) } return `export default ${stringifiedData};` From c2020045bc3bb6ca49259f5c60d1d2f1504750c5 Mon Sep 17 00:00:00 2001 From: Laityned Date: Thu, 20 Oct 2022 14:05:39 +0200 Subject: [PATCH 2/4] Collect image serverside in production --- .../webpack/loaders/next-image-loader.js | 6 +++++- .../plugins/next-trace-entrypoints-plugin.ts | 19 ++++++++++++++++++- 2 files changed, 23 insertions(+), 2 deletions(-) diff --git a/packages/next/build/webpack/loaders/next-image-loader.js b/packages/next/build/webpack/loaders/next-image-loader.js index a0b8d0f47b5ff..7a24bd9c7b4a0 100644 --- a/packages/next/build/webpack/loaders/next-image-loader.js +++ b/packages/next/build/webpack/loaders/next-image-loader.js @@ -92,7 +92,11 @@ function nextImageLoader(content) { ) if (isServer) { - this.emitFile(`../${interpolatedName}`, content, null) + this.emitFile( + `../${isDev ? '' : '../'}${interpolatedName}`, + content, + null + ) } return `export default ${stringifiedData};` diff --git a/packages/next/build/webpack/plugins/next-trace-entrypoints-plugin.ts b/packages/next/build/webpack/plugins/next-trace-entrypoints-plugin.ts index 1654e68e9329d..b5802195fb5bb 100644 --- a/packages/next/build/webpack/plugins/next-trace-entrypoints-plugin.ts +++ b/packages/next/build/webpack/plugins/next-trace-entrypoints-plugin.ts @@ -21,6 +21,19 @@ const TRACE_IGNORES = [ '**/*/next/dist/bin/next', ] +const NOT_TRACEABLE = [ + '.wasm', + '.png', + '.jpg', + '.jpeg', + '.gif', + '.webp', + '.avif', + '.ico', + '.bmp', + '.svg', +] + function getModuleFromDependency( compilation: any, dep: any @@ -125,7 +138,11 @@ export class TraceEntryPointsPlugin implements webpack.WebpackPluginInstance { await span.traceChild('create-trace-assets').traceAsyncFn(async () => { const entryFilesMap = new Map>() const chunksToTrace = new Set() - const isTraceable = (file: string) => !file.endsWith('.wasm') + + const isTraceable = (file: string) => + !NOT_TRACEABLE.some((suffix) => { + return file.endsWith(suffix) + }) for (const entrypoint of compilation.entrypoints.values()) { const entryFiles = new Set() From e3ac1875b8820844c1fca15e81c3046a193038ec Mon Sep 17 00:00:00 2001 From: Laityned Date: Fri, 21 Oct 2022 00:04:17 +0200 Subject: [PATCH 3/4] Tests for image import in static props --- .../default/pages/static-img.js | 8 ++++++- .../default/test/static.test.ts | 22 +++++++++++++++++++ 2 files changed, 29 insertions(+), 1 deletion(-) diff --git a/test/integration/next-image-new/default/pages/static-img.js b/test/integration/next-image-new/default/pages/static-img.js index bcbee358899af..3108954cfcb43 100644 --- a/test/integration/next-image-new/default/pages/static-img.js +++ b/test/integration/next-image-new/default/pages/static-img.js @@ -1,5 +1,6 @@ import React from 'react' import testImg from '../public/foo/test-rect.jpg' +import testImgProp from '../public/exif-rotation.jpg' import Image from 'next/image' import testJPG from '../public/test.jpg' @@ -19,11 +20,16 @@ import TallImage from '../components/TallImage' const blurDataURL = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNM/s/wBwAFjwJgf8HDLgAAAABJRU5ErkJggg==' -const Page = () => { +export const getStaticProps = () => ({ + props: { testImgProp }, +}) + +const Page = ({ testImgProp }) => { return (

Static Image

+ { `color:transparent;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 100 200'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3C/filter%3E%3Cimage preserveAspectRatio='none' filter='url(%23b)' x='0' y='0' height='100%25' width='100%25' href='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNM/s/wBwAFjwJgf8HDLgAAAABJRU5ErkJggg=='/%3E%3C/svg%3E")` ) }) + + it('should load direct imported image', async () => { + const src = await browser.elementById('basic-static').getAttribute('src') + expect(src).toMatch( + /_next\/image\?url=%2F_next%2Fstatic%2Fmedia%2Ftest-rect(.+)\.jpg&w=828&q=75/ + ) + const fullSrc = new URL(src, `http://localhost:${appPort}`) + const res = await fetch(fullSrc) + expect(res.status).toBe(200) + }) + + it('should load staticprops imported image', async () => { + const src = await browser + .elementById('basic-staticprop') + .getAttribute('src') + expect(src).toMatch( + /_next\/image\?url=%2F_next%2Fstatic%2Fmedia%2Fexif-rotation(.+)\.jpg&w=256&q=75/ + ) + const fullSrc = new URL(src, `http://localhost:${appPort}`) + const res = await fetch(fullSrc) + expect(res.status).toBe(200) + }) } describe('Build Error Tests', () => { From 3794f5e3be35e3f5d457731e11087c2b2f900436 Mon Sep 17 00:00:00 2001 From: Laityned Date: Fri, 21 Oct 2022 00:14:41 +0200 Subject: [PATCH 4/4] Tests: next-image-legacy image loaded in static props --- .../default/pages/static-img.js | 13 ++++++++++- .../default/test/static.test.ts | 22 +++++++++++++++++++ 2 files changed, 34 insertions(+), 1 deletion(-) diff --git a/test/integration/next-image-legacy/default/pages/static-img.js b/test/integration/next-image-legacy/default/pages/static-img.js index 4712c6d2de231..1ff35c5495847 100644 --- a/test/integration/next-image-legacy/default/pages/static-img.js +++ b/test/integration/next-image-legacy/default/pages/static-img.js @@ -1,5 +1,6 @@ import React from 'react' import testImg from '../public/foo/test-rect.jpg' +import testImgProp from '../public/exif-rotation.jpg' import Image from 'next/legacy/image' import testJPG from '../public/test.jpg' @@ -13,7 +14,11 @@ import testICO from '../public/test.ico' import TallImage from '../components/TallImage' -const Page = () => { +export const getStaticProps = () => ({ + props: { testImgProp }, +}) + +const Page = ({ testImgProp }) => { return (

Static Image

@@ -23,6 +28,12 @@ const Page = () => { layout="fixed" placeholder="blur" /> + { `style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;background-size:cover;background-position:0% 0%;filter:blur(20px);background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAAAAADhZOFXAAAAOklEQVR42iWGsQkAIBDE0iuIdiLOJjiGIzjiL/Meb4okiNYIlLjK3hJMzCQG1/0qmXXOUkjAV+m9wAMe3QiV6Ne8VgAAAABJRU5ErkJggg==")` ) }) + + it('should load direct imported image', async () => { + const src = await browser.elementById('basic-static').getAttribute('src') + expect(src).toMatch( + /_next\/image\?url=%2F_next%2Fstatic%2Fmedia%2Ftest-rect(.+)\.jpg&w=828&q=75/ + ) + const fullSrc = new URL(src, `http://localhost:${appPort}`) + const res = await fetch(fullSrc) + expect(res.status).toBe(200) + }) + + it('should load staticprops imported image', async () => { + const src = await browser + .elementById('basic-staticprop') + .getAttribute('src') + expect(src).toMatch( + /_next\/image\?url=%2F_next%2Fstatic%2Fmedia%2Fexif-rotation(.+)\.jpg&w=256&q=75/ + ) + const fullSrc = new URL(src, `http://localhost:${appPort}`) + const res = await fetch(fullSrc) + expect(res.status).toBe(200) + }) } describe('Build Error Tests', () => {