From 39fec66fe6f751cf5bf9ab4949e66de8ae449e8d Mon Sep 17 00:00:00 2001
From: Marco Valsecchi <marco.valsecchi@gmail.com>
Date: Wed, 16 Jun 2021 22:53:40 +0200
Subject: [PATCH] Fix next/image noscript src path with loaders (#24011)

In the `noscript` img version the correct `src` and `sizes` attributes are overwritten by not necessary inline declaration; in particular using the loaders the `src` attribute not take the right absolute path. I found this issue using a custom loader and because my site didn't indexing any images on the Google image search.

Fixes #24277
---
 packages/next/client/image.tsx                |  2 -
 .../image-component/noscript/pages/index.js   | 24 ++++++++++
 .../noscript/test/index.test.js               | 44 +++++++++++++++++++
 3 files changed, 68 insertions(+), 2 deletions(-)
 create mode 100644 test/integration/image-component/noscript/pages/index.js
 create mode 100644 test/integration/image-component/noscript/test/index.test.js

diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx
index 446cdf3a35396..c290fa0ae783e 100644
--- a/packages/next/client/image.tsx
+++ b/packages/next/client/image.tsx
@@ -569,9 +569,7 @@ export default function Image({
               sizes,
               loader,
             })}
-            src={src}
             decoding="async"
-            sizes={sizes}
             style={imgStyle}
             className={className}
           />
diff --git a/test/integration/image-component/noscript/pages/index.js b/test/integration/image-component/noscript/pages/index.js
new file mode 100644
index 0000000000000..f51b007e0e02d
--- /dev/null
+++ b/test/integration/image-component/noscript/pages/index.js
@@ -0,0 +1,24 @@
+import React from 'react'
+import Image from 'next/image'
+
+const myLoader = ({ src, width, quality }) => {
+  return `https://customresolver.com${src}?w~~${width},q~~${quality}`
+}
+
+const Page = () => {
+  return (
+    <div>
+      <p>noscript images</p>
+      <Image id="basic-image" src="/basic-image.jpg" width={640} height={360} />
+      <Image
+        loader={myLoader}
+        id="image-with-loader"
+        src="/remote-image.jpg"
+        width={640}
+        height={360}
+      />
+    </div>
+  )
+}
+
+export default Page
diff --git a/test/integration/image-component/noscript/test/index.test.js b/test/integration/image-component/noscript/test/index.test.js
new file mode 100644
index 0000000000000..7c428b87a0f18
--- /dev/null
+++ b/test/integration/image-component/noscript/test/index.test.js
@@ -0,0 +1,44 @@
+/* eslint-env jest */
+
+import { join } from 'path'
+import cheerio from 'cheerio'
+import {
+  killApp,
+  findPort,
+  nextStart,
+  nextBuild,
+  renderViaHTTP,
+} from 'next-test-utils'
+
+jest.setTimeout(1000 * 30)
+
+const appDir = join(__dirname, '../')
+let appPort
+let app
+
+describe('Noscript Tests', () => {
+  beforeAll(async () => {
+    await nextBuild(appDir)
+    appPort = await findPort()
+    app = await nextStart(appDir, appPort)
+  })
+  afterAll(() => killApp(app))
+  describe('Noscript page source tests', () => {
+    it('should use local API for noscript img#basic-image src attribute', async () => {
+      const html = await renderViaHTTP(appPort, '/')
+      const $ = cheerio.load(html)
+
+      expect($('noscript > img#basic-image').attr('src')).toMatch(
+        /^\/_next\/image/
+      )
+    })
+    it('should use loader url for noscript img#image-with-loader src attribute', async () => {
+      const html = await renderViaHTTP(appPort, '/')
+      const $ = cheerio.load(html)
+
+      expect($('noscript > img#image-with-loader').attr('src')).toMatch(
+        /^https:\/\/customresolver.com/
+      )
+    })
+  })
+})