Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:9 (7 by maintainers)

github_iconTop GitHub Comments

4reactions
kmvancommented, Sep 21, 2021

Why you disable JS in 2021?

1reaction
styflecommented, Sep 22, 2021

@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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

next/image - Next.js
Lazy loading is automatically disabled for images using priority . You should use the priority property on any image detected as the Largest...
Read more >
Error: Image Optimization using Next.js default loader is not ...
From Next.js 12.3, you can completely disable next/image Image Optimization using the unoptimized configuration in next.config.js .
Read more >
Nextjs image optimization with examples - Refine Dev
Built-in image optimization using next image component.
Read more >
All you need to know about images in Next.js - DatoCMS
How To Use the Next.js Image Component · Image from 'next/image' · import fooImage from '../public/assets/foo.jpg' · function FooComponent() {.
Read more >
Next.js automatic image optimization with next/image
Each of the layout values has their nuances in: The generated srcSet and sizes; Expected display or position value on ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

Next.js custom server doesn't work if the server imports `aysnc-listener` and uses Webpack 5

Next page

`unreachable code after return statement` warning