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

Jump to bottom

Image srcSet flashes then switches back to src image #19041

Closed
ettaibi opened this issue Nov 11, 2020 · 1 comment · Fixed by #20651
Closed

Image srcSet flashes then switches back to src image #19041

ettaibi opened this issue Nov 11, 2020 · 1 comment · Fixed by #20651
Assignees
@Timer
Milestone
iteration 15

Comments

@ettaibi
Copy link

ettaibi commented Nov 11, 2020

Bug report

Describe the bug

I use srcSet to display 2 different images: one on desktop and a different one mobile. My hero image needs to take full width of the container so I use layout="fill". The bug I encounter is that on mobile the image flashes to the srcSet specified on that size then flash back to the desktop image.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:
I've written an example on codesandbox to explain what I am talking about:

  1. Go to 'https://codesandbox.io/s/mutable-river-wi0uj'
  2. Open in new window.
  3. toggle device toolbar & use Iphone X for example, then refresh the page.
  4. You will notice the moving-truck-mobile.jpg flashes then switches to moving-truck.jpg

Expected behavior

The expected behaviour should display the moving-truck-mobile.jpg on mobile, knowing that it works for me when I use the html img

<img
    src="/moving-truck.jpg"
    srcSet="/moving-truck-mobile.jpg 375w,
            /moving-truck-mobile.jpg 640w,
            /moving-truck.jpg"
     sizes="(max-width: 375px) 375px, 100%"
     width="100%"
/>

System information

  • Browser : chrome
  • Version of Next.js: 10.0.1
@ettaibi ettaibi added the bug Issue was opened via the bug report template. label Nov 11, 2020
@Timer Timer added this to the iteration 13 milestone Nov 11, 2020
@Timer Timer added kind: bug and removed bug Issue was opened via the bug report template. labels Nov 11, 2020
@styfle styfle mentioned this issue Nov 13, 2020
Merged
kodiakhq bot pushed a commit that referenced this issue Nov 13, 2020
@styfle
Add missing sizes prop on image component (#19128)
20ab351 
- Fixes #19120
- Closes #18413 
- Related to #19041
@timneutkens timneutkens modified the milestones: iteration 13, iteration 14 Dec 1, 2020
@Timer Timer self-assigned this Dec 31, 2020
Timer added a commit to Timer/next.js that referenced this issue Dec 31, 2020
@Timer
fix(next/image): do not pass-through srcSrc on lazy image
d851b1a 
This PR fixes a bug where we'd accidentally pass-through the user-provided `srcSet` if the image was lazy, just to then replace it when we hydrate.

---

Fixes vercel#19041
@Timer Timer mentioned this issue Dec 31, 2020
Merged
@kodiakhq kodiakhq bot closed this as completed in #20651 Dec 31, 2020
kodiakhq bot pushed a commit that referenced this issue Dec 31, 2020
@Timer
fix(next/image): do not pass-through srcSrc on lazy image (#20651)
29b591b 
This PR fixes a bug where we'd accidentally pass-through the user-provided `srcSet` if the image was lazy, just to then replace it when we hydrate.

---

Fixes #19041
@balazsorban44
Copy link
Member

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.

@vercel vercel locked as resolved and limited conversation to collaborators Jan 28, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@Timer Timer

Labels
None yet
Projects
None yet
Milestone
iteration 15
Development

Successfully merging a pull request may close this issue.

fix(next/image): do not pass-through srcSrc on lazy image Timer/next.js
4 participants
@Timer @timneutkens @ettaibi @balazsorban44