search

beekai-oss / react-simple-img

🌅 React lazy load images with IntersectionObserver API and Priority Hints
MIT License
989 stars 41 forks source link

Img width: 100% height: auto #42

Closed humbertqz closed 5 years ago

humbertqz commented 5 years ago

Is there a way to use the component without the wrapping div with flexbox styling and fixed height?

I'm using in the img tag width: 100%; height: auto; to make my image responsive.

bluebill1049 commented 5 years ago

The div is made for the placeholder animation, because you have the actual image and placeholder wrapped inside.

There are two solutions:

  1. provide img width and height and apply applyAspectRatio
  2. i will have to create a minor version, by supply placeholder = false, which will remove placeholder and the wrapping div, plus you will lost the animation from the placeholder.

let me know.

humbertqz commented 5 years ago

Maybe that could be a feature?

Remove everything but the img tag.

bluebill1049 commented 5 years ago

sure i can looking into that over the weekend :) but you lost beautiful animation 👍

humbertqz commented 5 years ago

Nice, thanks. 😄

bluebill1049 commented 5 years ago

Could you please help on testing? react-simple-img@1.14.0-beta.1

you have to set placeholder={false}

humbertqz commented 5 years ago

Yes!, but i never used a beta repo, how can i download it? I was using the component in a GatsbyJs project.

bluebill1049 commented 5 years ago

just yarn add react-simple-img@1.14.0-beta.1 or npm i react-simple-img@1.14.0-beta.1. i did testing with my own demo and it works, just want to double check with yours before publishing.

humbertqz commented 5 years ago

Yes, it works this is my component:

<SimpleImg height={440} src={this.props.imgsrc} placeholder={false} />

This is what is rendered:

<img src="/static/thumb-plaza-cataluna-6106ec93376385a64fbf1cd99450ec09.jpg" srcset="" data-placeholder="false" data-src="/static/thumb-plaza-cataluna-6106ec93376385a64fbf1cd99450ec09.jpg" height="440" style="transition: all 0.3s ease 0s; opacity: 0; visibility: visible;">

Set the opacity: 0; by default, is there a way to change this?

bluebill1049 commented 5 years ago

thanks for the testing! i forgot to set opacity back to 1 for the animation :(

try this version react-simple-img@1.14.0-beta.3

should only render and animate when finished loading

humbertqz commented 5 years ago

It's working this is the rendered element:

<img src="/static/thumb-plaza-cataluna-6106ec93376385a64fbf1cd99450ec09.jpg" srcset="" data-placeholder="false" data-src="/static/thumb-plaza-cataluna-6106ec93376385a64fbf1cd99450ec09.jpg" data-end-style="opacity:0;" style="transition: all 0.3s ease 0s; opacity: 1; visibility: visible;">

bluebill1049 commented 5 years ago

thanks @humbertqz will publish today! thank you for your testing ❤️

bluebill1049 commented 5 years ago

v1.14.0 released, i will close the issue. feel free to re-open if you find other issues 👍