Comments (6)
bluebill1049
commented on May 27, 2024
1
any chance you can create a PR for this? I am pretty busy with another OS project at the moment.
from react-simple-img.
bluebill1049
commented on May 27, 2024
1
awesome thanks @ZLevine I will release the patch soon.
from react-simple-img.
jhpmatos
commented on May 27, 2024
+1
from react-simple-img.
bluebill1049
commented on May 27, 2024
you want to give a try this version: "version": "2.3.8-beta.1",
from react-simple-img.
ZLevine
commented on May 27, 2024
My apologies, I thought GitHub would notify me of all comments since I created this issue—I only received the Close notification.
I tested that branch and it's not quite fixed; now, the full srcSet value is output in SSR. Instead, it should be omitted entirely in SSR.
Here's the result of that branch, broke out for clarity:
<img
style="height:100%;width:100%;visibility:hidden;position:absolute;top:0;left:0"
alt="How to securely empty trash by default in Mac OS X"
src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
srcSet="https://howchoo.com/media/yw/u3/yz/ywu3yza4owmt.png 200w, https://howchoo.com/media/yw/u3/yz/ywu3yza4owmg_xs.png 360w, https://howchoo.com/media/yw/u3/yz/ywu3yza4owmm.png 414w, https://howchoo.com/media/yw/u3/yz/ywu3yza4owmg_md.png 768w, https://howchoo.com/media/yw/u3/yz/ywu3yza4owmg.png 900w, https://howchoo.com/media/yw/u3/yz/ywu3yza4owml.png 1440w"
data-src="https://howchoo.com/media/yw/u3/yz/ywu3yza4owmg.png"
data-srcset="https://howchoo.com/media/yw/u3/yz/ywu3yza4owmt.png 200w, https://howchoo.com/media/yw/u3/yz/ywu3yza4owmg_xs.png 360w, https://howchoo.com/media/yw/u3/yz/ywu3yza4owmm.png 414w, https://howchoo.com/media/yw/u3/yz/ywu3yza4owmg_md.png 768w, https://howchoo.com/media/yw/u3/yz/ywu3yza4owmg.png 900w, https://howchoo.com/media/yw/u3/yz/ywu3yza4owml.png 1440w"
sizes="(max-width: 200px) 200px, (max-width: 360px) 360px,(max-width: 414px) 414px, (max-width: 768px) 768px,(max-width: 900px) 900px, (max-width: 1440px) 1440px, 900px"
/>What it's doing
A full srcSet attribute and value are being output; this would negate lazy-loading as the browser would attempt to load the image once it finds a valid srcset attribute.
What it should be doing:
In SSR, the srcSet attribute should be missing entirely. This way, it can be added when the image is lazy-loaded. For example, it should look like this:
<img
style="height:100%;width:100%;visibility:hidden;position:absolute;top:0;left:0"
alt="How to securely empty trash by default in Mac OS X"
src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="https://howchoo.com/media/yw/u3/yz/ywu3yza4owmg.png"
data-srcset="https://howchoo.com/media/yw/u3/yz/ywu3yza4owmt.png 200w, https://howchoo.com/media/yw/u3/yz/ywu3yza4owmg_xs.png 360w, https://howchoo.com/media/yw/u3/yz/ywu3yza4owmm.png 414w, https://howchoo.com/media/yw/u3/yz/ywu3yza4owmg_md.png 768w, https://howchoo.com/media/yw/u3/yz/ywu3yza4owmg.png 900w, https://howchoo.com/media/yw/u3/yz/ywu3yza4owml.png 1440w"
sizes="(max-width: 200px) 200px, (max-width: 360px) 360px,(max-width: 414px) 414px, (max-width: 768px) 768px,(max-width: 900px) 900px, (max-width: 1440px) 1440px, 900px"
/>I'll make sure I get notifications for this issue and check regularly if you'd like me to test another branch. Thanks!
from react-simple-img.
ZLevine
commented on May 27, 2024
I submitted a PR with a fix. By setting the srcSet prop value to null if it's not cached, the prop is omitted in SSR HTML output but functions correctly in the client. isCached will always return false if it's not a browser since its state value is defaulted to false :)
from react-simple-img.
Related Issues (20)
- TypeError: placeholder.indexOf is not a function HOT 5
- Number.isNaN not supported in IE11 HOT 3
- Image can't be loaded on FireFox HOT 7
- Support for SEO (no script tag) HOT 9
- Inline CSS is stretching images HOT 14
- Image src not updated when component rerenders HOT 4
- Fallback/default img when img url is not valid HOT 7
- Wanting to turn off all class insertions HOT 5
- Add browser support to README HOT 9
- Using webp images with <picture> and multiple source sets? HOT 2
- Typescript types generated ? HOT 2
- disableAnimationAfterCache does not exist in source code HOT 1
- Height and width not accepting % HOT 1
- When Running Docker on LocalHost, Image Always Behind White Background HOT 2
- threshold doesn't take in account scrolling down HOT 5
- Placeholder does not have `alt` attribute HOT 2
- not showing img after re-rendering component HOT 1
- Images loaded over network twice with cache disabled HOT 4
- When Component Re-Renders with new src tag, image does not change. HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-simple-img.