Remove unnecessary <noscript>
from next/future/image
(#38080)
We don't need to include `<noscript>` for `next/future/image` since it uses native lazy loading instead of the `IntersectionObserver` (https://github.com/vercel/next.js/pull/37927). The only case when we still need `<noscript>` is for `placeholder="blur"` because it requires client-side JS to switch the from blur image to final image on load.
This commit is contained in:
parent
52763de94a
commit
0cb1253638
4 changed files with 44 additions and 26 deletions
|
@ -677,7 +677,7 @@ const ImageElement = ({
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
{(isLazy || placeholder === 'blur') && (
|
{placeholder === 'blur' && (
|
||||||
<noscript>
|
<noscript>
|
||||||
<img
|
<img
|
||||||
{...rest}
|
{...rest}
|
||||||
|
|
|
@ -169,11 +169,9 @@ function runTests(mode) {
|
||||||
const $html = cheerio.load(html)
|
const $html = cheerio.load(html)
|
||||||
|
|
||||||
const els = [].slice.apply($html('img'))
|
const els = [].slice.apply($html('img'))
|
||||||
expect(els.length).toBe(2)
|
expect(els.length).toBe(1)
|
||||||
|
|
||||||
const [el, noscriptEl] = els
|
const [el] = els
|
||||||
expect(noscriptEl.attribs.src).toBeDefined()
|
|
||||||
expect(noscriptEl.attribs.srcset).toBeDefined()
|
|
||||||
|
|
||||||
expect(el.attribs.src).not.toBe('/truck.jpg')
|
expect(el.attribs.src).not.toBe('/truck.jpg')
|
||||||
expect(el.attribs.srcset).not.toBe(
|
expect(el.attribs.srcset).not.toBe(
|
||||||
|
|
|
@ -9,7 +9,7 @@ const Page = () => {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<p>noscript images</p>
|
<p>noscript images</p>
|
||||||
<Image id="basic-image" src="/basic-image.jpg" width={640} height={360} />
|
<Image id="basic-image" src="/basic.jpg" width={640} height={360} />
|
||||||
<Image
|
<Image
|
||||||
loader={myLoader}
|
loader={myLoader}
|
||||||
id="image-with-loader"
|
id="image-with-loader"
|
||||||
|
@ -17,6 +17,14 @@ const Page = () => {
|
||||||
width={640}
|
width={640}
|
||||||
height={360}
|
height={360}
|
||||||
/>
|
/>
|
||||||
|
<Image
|
||||||
|
id="image-with-blur"
|
||||||
|
src="/blur.jpg"
|
||||||
|
width={640}
|
||||||
|
height={360}
|
||||||
|
placeholder="blur"
|
||||||
|
blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mMU/M9QDwADygGR4qH9qQAAAABJRU5ErkJggg=="
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,8 +3,9 @@
|
||||||
import { join } from 'path'
|
import { join } from 'path'
|
||||||
import cheerio from 'cheerio'
|
import cheerio from 'cheerio'
|
||||||
import {
|
import {
|
||||||
killApp,
|
|
||||||
findPort,
|
findPort,
|
||||||
|
killApp,
|
||||||
|
launchApp,
|
||||||
nextStart,
|
nextStart,
|
||||||
nextBuild,
|
nextBuild,
|
||||||
renderViaHTTP,
|
renderViaHTTP,
|
||||||
|
@ -14,29 +15,40 @@ const appDir = join(__dirname, '../')
|
||||||
let appPort
|
let appPort
|
||||||
let app
|
let app
|
||||||
|
|
||||||
describe('Noscript Tests', () => {
|
function runTests() {
|
||||||
beforeAll(async () => {
|
it('should include noscript for placeholder=blur but not others', async () => {
|
||||||
await nextBuild(appDir)
|
const html = await renderViaHTTP(appPort, '/')
|
||||||
appPort = await findPort()
|
const $ = cheerio.load(html)
|
||||||
app = await nextStart(appDir, appPort)
|
|
||||||
|
expect($('noscript > img#basic-image').attr('src')).toBeUndefined()
|
||||||
|
expect($('noscript > img#image-with-loader').attr('src')).toBeUndefined()
|
||||||
|
expect($('noscript > img#image-with-blur').attr('src')).toMatch('blur.jpg')
|
||||||
})
|
})
|
||||||
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(
|
describe('Future Image Component Noscript Tests', () => {
|
||||||
/^\/_next\/image/
|
describe('dev mode', () => {
|
||||||
)
|
beforeAll(async () => {
|
||||||
|
appPort = await findPort()
|
||||||
|
app = await launchApp(appDir, appPort)
|
||||||
|
})
|
||||||
|
afterAll(async () => {
|
||||||
|
await killApp(app)
|
||||||
})
|
})
|
||||||
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(
|
runTests()
|
||||||
/^https:\/\/example\.vercel\.sh/
|
})
|
||||||
)
|
|
||||||
|
describe('server mode', () => {
|
||||||
|
beforeAll(async () => {
|
||||||
|
await nextBuild(appDir)
|
||||||
|
appPort = await findPort()
|
||||||
|
app = await nextStart(appDir, appPort)
|
||||||
})
|
})
|
||||||
|
afterAll(async () => {
|
||||||
|
await killApp(app)
|
||||||
|
})
|
||||||
|
|
||||||
|
runTests()
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
Loading…
Reference in a new issue