Skip to content

Commit

Permalink
Remove <noscript> from next/future/image (#40075)
Browse files Browse the repository at this point in the history
This PR removes `<noscript>` from `next/future/image` since it is no longer needed now that we use a svg blur placeholder (as opposed to css filter).

- Fixes  #38621 
- Closes #39736
  • Loading branch information
styfle committed Aug 30, 2022
1 parent c3ceeb0 commit e735c51
Show file tree
Hide file tree
Showing 5 changed files with 0 additions and 129 deletions.
27 changes: 0 additions & 27 deletions packages/next/client/future/image.tsx
Expand Up @@ -134,7 +134,6 @@ type ImageElementProps = Omit<ImageProps, 'src' | 'loader'> & {
onLoadingCompleteRef: React.MutableRefObject<OnLoadingComplete | undefined>
setBlurComplete: (b: boolean) => void
setShowAltText: (b: boolean) => void
noscriptSizes: string | undefined
}

function getWidths(
Expand Down Expand Up @@ -343,7 +342,6 @@ const ImageElement = ({
setShowAltText,
onLoad,
onError,
noscriptSizes,
...rest
}: ImageElementProps) => {
loading = isLazy ? 'lazy' : loading
Expand Down Expand Up @@ -438,30 +436,6 @@ const ImageElement = ({
}
}}
/>
{placeholder === 'blur' && (
<noscript>
<img
{...rest}
{...generateImgAttrs({
config,
src: srcString,
unoptimized,
width: widthInt,
quality: qualityInt,
sizes: noscriptSizes,
loader,
})}
width={widthInt}
height={heightInt}
decoding="async"
data-nimg={`future${fill ? '-fill' : ''}`}
style={imgStyle}
className={className}
// @ts-ignore - TODO: upgrade to `@types/react@17`
loading={loading}
/>
</noscript>
)}
</>
)
}
Expand Down Expand Up @@ -884,7 +858,6 @@ export default function Image({
onLoadingCompleteRef,
setBlurComplete,
setShowAltText,
noscriptSizes: sizes,
...rest,
}
return (
Expand Down
9 changes: 0 additions & 9 deletions test/integration/image-future/default/test/index.test.ts
Expand Up @@ -1097,15 +1097,6 @@ function runTests(mode) {
)
})

it('should not use blurry placeholder for <noscript> image', async () => {
const html = await renderViaHTTP(appPort, '/blurry-placeholder')
const $html = cheerio.load(html)
const img = $html('noscript > img')[0]
expect(img).toBeDefined()
expect(img.attribs.id).toBe('blurry-placeholder-raw')
expect(img.attribs.style).toBe('color:transparent')
})

it('should remove blurry placeholder after image loads', async () => {
const browser = await webdriver(appPort, '/blurry-placeholder')
await check(
Expand Down
7 changes: 0 additions & 7 deletions test/integration/image-future/noscript/next.config.js

This file was deleted.

32 changes: 0 additions & 32 deletions test/integration/image-future/noscript/pages/index.js

This file was deleted.

54 changes: 0 additions & 54 deletions test/integration/image-future/noscript/test/index.test.ts

This file was deleted.

0 comments on commit e735c51

Please sign in to comment.