Bruno Crosier 48dd9954d8 Add fallback for <Image /> component when JavaScript is disabled in browser (#19052) ... 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		2021-03-23 19:25:00 +00:00
..
base-path	Remove visibility: hidden from the image component (#23278)	2021-03-22 19:20:52 +00:00
basic	Fix next/image being downloaded multiple times on Safari (#22902)	2021-03-09 19:07:01 +00:00
custom-resolver	Update next/image test (#20986)	2021-01-13 15:05:08 +00:00
default	Add fallback for <Image /> component when JavaScript is disabled in browser (#19052)	2021-03-23 19:25:00 +00:00
typescript	Add props objectFit and objectPosition to Image component (#18849)	2020-11-05 19:42:55 +00:00
typescript-style	Omit ignored property from <Image/ > to prevent confusion (#18796)	2020-11-04 16:13:07 +00:00