[Breaking] Require images.localPatterns for query in Image src

docs/01-app/03-api-reference/02-components/image.mdx

@@ -528,6 +528,8 @@ module.exports = {
 
 The example above will ensure the `src` property of `next/image` must start with `/assets/images/` and must not have a query string. Attempting to optimize any other path will respond with `400` Bad Request error.
 
+> **Good to know**: Omitting the `search` property allows all search parameters which could allow malicious actors to optimize URLs you did not intend. Try using a specific value like `search: '?v=2'` to ensure an exact match.
+
 #### `remotePatterns`
 
 Use `remotePatterns` in your `next.config.js` file to allow images from specific external paths and block all others. This ensures that only external images from your account can be served.

errors/next-image-unconfigured-localpatterns.mdx

@@ -16,6 +16,7 @@ module.exports = {
     localPatterns: [
       {
         pathname: '/assets/**',
+        search: '?v=2',
       },
     ],
   },

packages/next/errors.json

@@ -847,5 +847,6 @@
   "846": "Route %s used \\`cookies()\\` inside a function cached with \\`unstable_cache()\\`. Accessing Dynamic data sources inside a cache scope is not supported. If you need this data inside a cached function use \\`cookies()\\` outside of the cached function and pass the required dynamic data in as an argument. See more info here: https://nextjs.org/docs/app/api-reference/functions/unstable_cache",
   "847": "Route %s with \\`dynamic = \"error\"\\` couldn't be rendered statically because it used \\`connection()\\`. See more info here: https://nextjs.org/docs/app/building-your-application/rendering/static-and-dynamic#dynamic-rendering",
   "848": "%sused %s. \\`searchParams\\` is a Promise and must be unwrapped with \\`await\\` or \\`React.use()\\` before accessing its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis",
-  "849": "Route %s with \\`dynamic = \"error\"\\` couldn't be rendered statically because it used \\`cookies()\\`. See more info here: https://nextjs.org/docs/app/building-your-application/rendering/static-and-dynamic#dynamic-rendering"
+  "849": "Route %s with \\`dynamic = \"error\"\\` couldn't be rendered statically because it used \\`cookies()\\`. See more info here: https://nextjs.org/docs/app/building-your-application/rendering/static-and-dynamic#dynamic-rendering",
+  "850": "Image with src \"%s\" is using a query string which requires images.localPatterns configuration.\\nRead more: https://nextjs.org/docs/messages/next-image-unconfigured-localpatterns"
 }

packages/next/src/client/legacy/image.tsx

@@ -865,8 +865,8 @@ export default function Image({
           (config.localPatterns.length === 1 &&
             config.localPatterns[0].pathname === '/_next/static/media/**'))
       ) {
-        warnOnce(
-          `Image with src "${src}" is using a query string which is not configured in images.localPatterns. This config will be required starting in Next.js 16.` +
+        throw new Error(
+          `Image with src "${src}" is using a query string which requires images.localPatterns configuration.` +
             `\nRead more: https://nextjs.org/docs/messages/next-image-unconfigured-localpatterns`
         )
       }

packages/next/src/server/image-optimizer.ts

@@ -371,6 +371,16 @@ export class ImageOptimizerCache {
       if (!hasLocalMatch(localPatterns, url)) {
         return { errorMessage: '"url" parameter is not allowed' }
       }
+      if (
+        url.includes('?') &&
+        nextConfig.images?.localPatterns?.length === 1 &&
+        nextConfig.images.localPatterns[0].pathname === '/_next/static/media/**'
+      ) {
+        return {
+          errorMessage:
+            '"url" parameter has search query which requires `images.localPatterns` configuration',
+        }
+      }
     } else {
       let hrefParsed: URL
 

packages/next/src/shared/lib/get-img-props.ts

@@ -560,18 +560,7 @@ export function getImgProps(
           `\nRead more: https://nextjs.org/docs/messages/next-image-unconfigured-qualities`
       )
     }
-    if (
-      src.startsWith('/') &&
-      src.includes('?') &&
-      (!config?.localPatterns?.length ||
-        (config.localPatterns.length === 1 &&
-          config.localPatterns[0].pathname === '/_next/static/media/**'))
-    ) {
-      warnOnce(
-        `Image with src "${src}" is using a query string which is not configured in images.localPatterns. This config will be required starting in Next.js 16.` +
-          `\nRead more: https://nextjs.org/docs/messages/next-image-unconfigured-localpatterns`
-      )
-    }
+
     if (placeholder === 'blur' && !blurDataURL) {
       const VALID_BLUR_EXT = ['jpeg', 'png', 'webp', 'avif'] // should match next-image-loader
 

packages/next/src/shared/lib/image-loader.ts

@@ -46,6 +46,17 @@ function defaultLoader({
           )
         }
       }
+
+      if (
+        src.includes('?') &&
+        config.localPatterns.length === 1 &&
+        config.localPatterns[0].pathname === '/_next/static/media/**'
+      ) {
+        throw new Error(
+          `Image with src "${src}" is using a query string which requires images.localPatterns configuration.` +
+            `\nRead more: https://nextjs.org/docs/messages/next-image-unconfigured-localpatterns`
+        )
+      }
     }
 
     if (!src.startsWith('/') && (config.domains || config.remotePatterns)) {

test/unit/next-image-get-img-props.test.ts

@@ -460,26 +460,6 @@ describe('getImageProps()', () => {
       ['src', '/test.svg'],
     ])
   })
-  it('should auto unoptimized for relative svg with query', async () => {
-    const { props } = getImageProps({
-      alt: 'a nice desc',
-      src: '/test.svg?v=1',
-      width: 100,
-      height: 200,
-    })
-    expect(warningMessages).toStrictEqual([
-      'Image with src "/test.svg?v=1" is using a query string which is not configured in images.localPatterns. This config will be required starting in Next.js 16.\nRead more: https://nextjs.org/docs/messages/next-image-unconfigured-localpatterns',
-    ])
-    expect(Object.entries(props)).toStrictEqual([
-      ['alt', 'a nice desc'],
-      ['loading', 'lazy'],
-      ['width', 100],
-      ['height', 200],
-      ['decoding', 'async'],
-      ['style', { color: 'transparent' }],
-      ['src', '/test.svg?v=1'],
-    ])
-  })
   it('should auto unoptimized for absolute svg', async () => {
     const { props } = getImageProps({
       alt: 'a nice desc',