48dd9954d8
The current `<Image />` component does not fallback gracefully when JavaScript is disabled in the client / browser. You can test this with the [official Next/Image example](https://csb-4k0kr-p8ya8f304.vercel.app/), by disabling JavaScript in the browser's DevTools. Video demo: https://streamable.com/frkvw9 This PR aims to fix this behaviour by using `<noscript></noscript>` tags to conditionally display a standard `<img>` element using the `props` passed to `<Image />` when JavaScript is disabled. For browser sessions where JavaScript is enabled, this will not cause an increase in network requests, so there should be no downside. One area where this PR is a bit "hacky" is that it uses a negative `margin-top` to counteract `sizerStyle.paddingTop`. From what I can tell, `sizerStyle.paddingTop` is generated on the server side, where we can not know ahead of time whether JavaScript is enabled in the browser - hence why I've opted for this solution. Fixes #19223 Fixes #21214 |
||
|---|---|---|
| .. | ||
| dev | ||
| portal | ||
| experimental-script.tsx | ||
| head-manager.ts | ||
| image.tsx | ||
| index.tsx | ||
| link.tsx | ||
| next-dev.js | ||
| next.js | ||
| normalize-trailing-slash.ts | ||
| page-loader.ts | ||
| performance-relayer.ts | ||
| polyfills.js | ||
| request-idle-callback.ts | ||
| route-announcer.tsx | ||
| route-loader.ts | ||
| router.ts | ||
| use-intersection.tsx | ||
| with-router.tsx | ||