Skip to content

Commit

Permalink
Fix next/image noscript src path with loaders (#24011)
Browse files Browse the repository at this point in the history
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
  • Loading branch information
valse authored Jun 16, 2021
1 parent 2ac47d2 commit 22676ab
Show file tree
Hide file tree
Showing 3 changed files with 68 additions and 2 deletions.
2 changes: 0 additions & 2 deletions packages/next/client/image.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -569,9 +569,7 @@ export default function Image({
sizes,
loader,
})}
src={src}
decoding="async"
sizes={sizes}
style={imgStyle}
className={className}
/>
Expand Down
24 changes: 24 additions & 0 deletions test/integration/image-component/noscript/pages/index.js
Original file line number Diff line number Diff line change
@@ -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
44 changes: 44 additions & 0 deletions test/integration/image-component/noscript/test/index.test.js
Original file line number Diff line number Diff line change
@@ -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/
)
})
})
})

0 comments on commit 22676ab

Please sign in to comment.