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>
|
||||
<img
|
||||
{...rest}
|
||||
|
|
|
@ -169,11 +169,9 @@ function runTests(mode) {
|
|||
const $html = cheerio.load(html)
|
||||
|
||||
const els = [].slice.apply($html('img'))
|
||||
expect(els.length).toBe(2)
|
||||
expect(els.length).toBe(1)
|
||||
|
||||
const [el, noscriptEl] = els
|
||||
expect(noscriptEl.attribs.src).toBeDefined()
|
||||
expect(noscriptEl.attribs.srcset).toBeDefined()
|
||||
const [el] = els
|
||||
|
||||
expect(el.attribs.src).not.toBe('/truck.jpg')
|
||||
expect(el.attribs.srcset).not.toBe(
|
||||
|
|
|
@ -9,7 +9,7 @@ const Page = () => {
|
|||
return (
|
||||
<div>
|
||||
<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
|
||||
loader={myLoader}
|
||||
id="image-with-loader"
|
||||
|
@ -17,6 +17,14 @@ const Page = () => {
|
|||
width={640}
|
||||
height={360}
|
||||
/>
|
||||
<Image
|
||||
id="image-with-blur"
|
||||
src="/blur.jpg"
|
||||
width={640}
|
||||
height={360}
|
||||
placeholder="blur"
|
||||
blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mMU/M9QDwADygGR4qH9qQAAAABJRU5ErkJggg=="
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -3,8 +3,9 @@
|
|||
import { join } from 'path'
|
||||
import cheerio from 'cheerio'
|
||||
import {
|
||||
killApp,
|
||||
findPort,
|
||||
killApp,
|
||||
launchApp,
|
||||
nextStart,
|
||||
nextBuild,
|
||||
renderViaHTTP,
|
||||
|
@ -14,29 +15,40 @@ const appDir = join(__dirname, '../')
|
|||
let appPort
|
||||
let app
|
||||
|
||||
describe('Noscript Tests', () => {
|
||||
function runTests() {
|
||||
it('should include noscript for placeholder=blur but not others', async () => {
|
||||
const html = await renderViaHTTP(appPort, '/')
|
||||
const $ = cheerio.load(html)
|
||||
|
||||
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')
|
||||
})
|
||||
}
|
||||
|
||||
describe('Future Image Component Noscript Tests', () => {
|
||||
describe('dev mode', () => {
|
||||
beforeAll(async () => {
|
||||
appPort = await findPort()
|
||||
app = await launchApp(appDir, appPort)
|
||||
})
|
||||
afterAll(async () => {
|
||||
await killApp(app)
|
||||
})
|
||||
|
||||
runTests()
|
||||
})
|
||||
|
||||
describe('server mode', () => {
|
||||
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/
|
||||
)
|
||||
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(
|
||||
/^https:\/\/example\.vercel\.sh/
|
||||
)
|
||||
})
|
||||
runTests()
|
||||
})
|
||||
})
|
||||
|
|
Loading…
Reference in a new issue