Skip to content

Support styles applied to the img after loading #31

Open
@cmenge

Description

@cmenge

Is your feature request related to a problem? Please describe.
Use case: display a grid of preview images. To avoid image distortion and support various screen sizes and layouts, one can use images that have larger natural size than the possible preview sizes. These natural images should be centered, however - otherwise, you inadvertently crop the image to its top-left region, which is undesirable (top):

gallery-details

Describe the solution you'd like
A common trick is to apply a style to the image like this (potentially in the X-direction, too):

  position: "relative",
  top: "50%",
  transform: "translateY(-50%)"
  ...

However, this should only be applied to the node. I propose to introduce loadedImageProps which are then spread to the image in getImg:

// ...
return <img onLoad={this.onImageLoad()} {...imgProps} {...loadedImageProps} />;

which can be used like

<LazyLoadImage
    loadedImageProps={{ className: classes.imagePositionHack }}
    // ...
/>

Describe alternatives you've considered
Applying the style directly to the LazyLoad component doesn't work, because the relative transform meddles with the visibility detection. A simple className for the img component could be an option, similar to material-ui allows styling of children, e.g. <LazyLoad classes={{ img: myImgClassName }} ... />.

I can send a pull request in the day.

Activity

Aljullu

Aljullu commented on Mar 17, 2019

@Aljullu
Owner

@cmenge thanks for opening an issue. Did you have time to prepare a PR? I was playing with this idea in a branch named loaded-image-props, but I'm not sure this prop will handle all usecases anyway, so I'm a bit reluctant to merge it.

If I understood your problem correctly, you could create a wrapper component and use beforeLoad and afterLoad events to change the className or style, right? Something like this:

import React from 'react';
import { LazyLoadImage } from 'react-lazy-load-image-component';

export class MyImage extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      className: 'not-loaded',
    };
  }

  beforeLoad() {
    this.setState({
      className: 'loading',
    });
  }

  afterLoad() {
    this.setState({
      className: 'loaded',
    });
  }
  
  render() {
    const { image } = this.props;
    const { className } = this.state;
    
    return (
      <LazyLoadImage
        afterLoad={this.afterLoad}
        alt={image.alt}
        beforeLoad={this.beforeLoad}
        className={className}
        src={image.src} />
    );
  }
};

export default MyImage;

Do you think that would solve your problem?

linked a pull request that will close this issue on Jul 27, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Participants

      @cmenge@Aljullu

      Issue actions

        Support styles applied to the img after loading · Issue #31 · Aljullu/react-lazy-load-image-component