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.
Image component loads images twice if fallback prop is used
See original GitHub issueDescription
When I use the fallback prop in the Image component, I get double requests for the images in Chrome.
Link to Reproduction
https://codesandbox.io/s/2jdpu
Steps to reproduce
- Open Chrome, the developer tools and go to the “Network” tab, click the “Disable cache” and filter by “Img”
- Go to https://chakra-ui.com/ and scroll down to the “Less code. More speed” section
- In the codesandbox example add
fallback={<div />}and rerun the example - You should see “https://a0.muscache.com/4ea/air/v2/pictures/7ea52b34-8177-45ab-b5ad-d1cb83b6f006.jpg?t=r:w1200-h720-sfit,e:fjpg-c90” image loaded twice with the response 200
Chakra UI Version
1.7.3
Browser
Chrome
Operating System
- macOS
- Windows
- Linux
Additional Information
This does not happen in Safari and Firefox. Chrome version is Version 96.0.4664.110 (Official Build) (arm64) macOS version is Big Sur, 11.2.3
Issue Analytics
- State:
- Created 2 years ago
- Reactions:1
- Comments:15 (3 by maintainers)
Top Results From Across the Web
Image is loading double time in React due to useState?
And I think it's loading twice cause at some point you added the two of them in the DOM either directly or after...
Read more >Preventing Content Reflow From Lazy-Loaded Images
You know the concept of lazy loading images. It prevents the browser from loading images until those images are in (or nearly in)...
Read more >javascript - Working with images in multiple formats
I've been doing some research around how to best make use of the WebP images (with fallback) in React. Most solutions point to...
Read more >a Tale of Img Loading in ReactJS - Paul Ly
Now we have a way to know when an image has been actually loaded, and not just when the element is first rendered...
Read more ><img>: The Image Embed element - HTML - MDN Web Docs
There are a number of situations in which a browser might not display images, such as: Non-visual browsers (such as those used by...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Hej @lcswillems
As @noobinthisgame stated - the PR is related to this 😃 Hopefully, we can get it merged soon.
The proposed fix for #5288 also fixes this one. You can see in the example that the image is now only requested once.