Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add fallback for <Image /> component when JavaScript is disabled in browser #19052

Merged
merged 17 commits into from
Mar 23, 2021
+28 −4
Merged

Add fallback for <Image /> component when JavaScript is disabled in browser #19052

Changes from 11 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
5f177ad
add img fallback when no javascript in browser
brunocrosier Nov 11, 2020
8eaa8b2
formatting
brunocrosier Nov 11, 2020
e9135c4
apply styfle fixes
brunocrosier Jan 16, 2021
a0ff7ca
remove fragment + use imgStyle
brunocrosier Jan 16, 2021
be37666
visibility: 'visible' on <noscript> + styfle fixes
brunocrosier Jan 16, 2021
734f88d
remove ref + add sizes on noscript img
brunocrosier Jan 17, 2021
df69386
visibility: 'inherit'
brunocrosier Jan 18, 2021
c2a072b
add srcset to noscript img
brunocrosier Mar 10, 2021
bb36d83
Merge branch 'canary' into IMAGE_NO_JS_FALLBACK
shuding Mar 10, 2021
88e183b
generate imageAttributes on noscript img
brunocrosier Mar 10, 2021
9365e04
Merge branch 'canary' into IMAGE_NO_JS_FALLBACK
Timer Mar 17, 2021
9e37d4c
update tests
brunocrosier Mar 17, 2021
201bfb5
update test
brunocrosier Mar 17, 2021
78246b9
update test
brunocrosier Mar 17, 2021
b54cd22
update test
brunocrosier Mar 17, 2021
9c24d3b
only render <noscript> if !isVisible
brunocrosier Mar 18, 2021
d7480e1
Merge branch 'canary' into IMAGE_NO_JS_FALLBACK
kodiakhq[bot] Mar 23, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions packages/next/client/image.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -438,6 +438,25 @@ export default function Image({
) : null}
</div>
) : null}
<noscript>
<img
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What if the image wasn't lazy? Would we duplicate the image in this scenario (when there's no JS)?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry, I'm not sure that I understand exactly what you mean. Are you worried about duplicate network requests?

I don't think there is any possibility that the image will show up twice because there is only one <img> inside the <noscript> . Duplicate network requests shouldn't be happening either because JavaScript is either enabled (in which case, the browser does not request the src of the img inside of <noscript>) or disabled.

If I've misunderstood the question, could you explain again please (maybe with a small example?)

Thanks!

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think @Timer means that when you have both loading="eager" and JS disabled, isVisible will be true when pre-rendering and the original img tag will show the image. This causes 2 images being rendered on the screen.

Copy link
Member

@shuding shuding Mar 18, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For example you will see 2 images (overlapped) with this:

<Image
  src="..."
  width="20"
  height="20"
  loading="eager"
/>

To fix I think we can only add this <noscript> tag when isVisible is false.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, latest commit only renders the <noscript> when isVisible is false

{...rest}
brunocrosier marked this conversation as resolved.
Show resolved Hide resolved
{...generateImgAttrs({
src,
unoptimized,
layout,
width: widthInt,
quality: qualityInt,
sizes,
loader,
})}
src={src}
decoding="async"
styfle marked this conversation as resolved.
Show resolved Hide resolved
sizes={sizes}
style={{ ...imgStyle, visibility: 'inherit' }}
className={className}
/>
</noscript>
<img
{...rest}
{...imgAttributes}
Expand Down