fix(image-optimizer): allow external image urls with _next/image path…

…name to be rendered via Image component

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

@@ -215,21 +215,26 @@ export class ImageOptimizerCache {
  }
  }
 
+ let isAbsolute = !url.startsWith('/')
+
  const parsedUrl = parseUrl(url)
  if (parsedUrl) {
+ // if the url is external (matching with remote patterns), we can allow it
+ const isExternalUrlWithMatch =
+ isAbsolute && hasMatch(domains, remotePatterns, parsedUrl)
  const decodedPathname = decodeURIComponent(parsedUrl.pathname)
- if (/\/_next\/image($|\/)/.test(decodedPathname)) {
+ if (
+ /\/_next\/image($|\/)/.test(decodedPathname) &&
+ !isExternalUrlWithMatch
+ ) {
  return {
  errorMessage: '"url" parameter cannot be recursive',
  }
  }
  }
 
- let isAbsolute: boolean
-
- if (url.startsWith('/')) {
+ if (!isAbsolute) {
  href = url
- isAbsolute = false
  } else {
  let hrefParsed: URL
 

test/integration/image-optimizer/test/util.ts

@@ -1064,6 +1064,17 @@ export function runTests(ctx: RunTestsCtx) {
  })
  })
 
+ it('should pass with external absolute next image url', async () => {
+ const query = {
+ url: `https://example.com/_next/image?url=test.png&w=1&q=1`,
+ w: ctx.w,
+ q: 1,
+ }
+ const res = await fetchViaHTTP(ctx.appPort, '/_next/image', query, {})
+ // the example image doesn't exist, so we do not check for 200 status code
+ expect(res.status).not.toBe(400)
+ })
+
  it('should fail when internal url is not an image', async () => {
  const url = `/api/no-header`
  const query = { url, w: ctx.w, q: 39 }