next/image demo doesn't render image when JS is disabled

[remy]

What version of Next.js are you using?

v11.0.0

What version of Node.js are you using?

12.0.0

What browser are you using?

Firefox latest

What operating system are you using?

macOS

How are you deploying your application?

am not - this is a link from next docs

Describe the Bug

This URL: https://image-component.nextjs.gallery/layout-fill from the next documentation next/image page only renders two images when JS is disabled and not three.

The middle image looks to have a noscript but it's not resolving the image source.

Expected Behavior

next/image progressively enhances and the img tag is used when there's broken JS or no JS.

To Reproduce

Visit https://image-component.nextjs.gallery/layout-fill with js disabled.

[masx200]

<noscript>
<img loading="lazy" src="pathtoimg">
</noscript>

[remy]

Yeah, @masx200 that should be what nextjs does by default in the next/image component, but it's not.

[styfle]

I can't reproduce. Here's what I tried:

1. Created new Chrome profile with setting "Don't allow sites to use javascript" chrome://settings/content/javascript
2. Visited https://image-component.nextjs.gallery/layout-fill
3. I see all 3 images on the page and 3 <noscript> with view-source

[remy]

Why you disable JS in 2021?

All browsers run with JS disabled before JS has finished parsing. And only if the JS parses correctly will it run - assuming the user has it enabled (most do). But if it fails in flight, you have a page that has no JS - and Next's selling point is SSR which means the page will render without JS.

[remy]

@styfle on Chrome it renders, but not in Firefox (I had that in the original bug filed).

I'm using this extension to do it: https://github.com/dpacassi/disable-javascript - but I'd imagine any extension or method would work in Firefox.

[styfle]

@remy I was able to reproduce with that extension.

However the built-in way (visit about:config and set javascript.enabled: false) works fine, it loads all 3 images.

I'm not sure why it doesn't observe the <noscript> in this case. Seems like a bug with that extension.

[ijjk]

Looks like this is a known issue with the extension dpacassi/disable-javascript#79

I'm gonna close this in favor of that issue since it doesn't appear to be a Next.js issue.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.