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
Merged

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

Show file tree
Hide file tree
Changes from 16 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
21 changes: 21 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,27 @@ export default function Image({
) : null}
</div>
) : null}
{!isVisible && (
<noscript>
<img
{...rest}
{...generateImgAttrs({
src,
unoptimized,
layout,
width: widthInt,
quality: qualityInt,
sizes,
loader,
})}
src={src}
decoding="async"
sizes={sizes}
style={{ ...imgStyle, visibility: 'inherit' }}
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 we can remove visibility since it was removed in #23278

cc @shuding

Copy link
Member

Choose a reason for hiding this comment

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

Yep!

className={className}
/>
</noscript>
)}
<img
{...rest}
{...imgAttributes}
Expand Down
7 changes: 5 additions & 2 deletions test/integration/image-component/default/test/index.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,9 +161,12 @@ function runTests(mode) {
const $html = cheerio.load(html)

const els = [].slice.apply($html('img'))
expect(els.length).toBe(1)
expect(els.length).toBe(2)

const [noscriptEl, el] = els
expect(noscriptEl.attribs.src).toBeDefined()
expect(noscriptEl.attribs.srcset).toBeDefined()

const [el] = els
expect(el.attribs.src).toBeDefined()
expect(el.attribs.srcset).toBeUndefined()
expect(el.attribs.srcSet).toBeUndefined()
Expand Down
4 changes: 2 additions & 2 deletions test/unit/image-rendering.unit.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ describe('Image rendering', () => {
const $ = cheerio.load(html)
const img = $('#unit-image')
expect(img.attr('id')).toBe('unit-image')
expect(img.attr('src')).toContain('/_next/image?url=%2Ftest.png')
expect(img.attr('srcset')).toContain('/_next/image?url=%2Ftest.png')
expect(img.attr('src')).toContain('test.png')
expect(img.attr('srcset')).toContain('test.png')
})
})