CODEWITHSUNDEEP
javascriptreactjs
Jerald George
Jerald George

Reputation: 171

Image is getting shrink-ed after refresh

In an employee detail page am showing a image of the employee in certain size , when the page is get refresh the size of the image getting shrink-ed.

     <Col xs="12" sm="2">
        <img
          src={this.state.image==='' ? loader : this.state.image}
          className="img-avatar avatar"
        />
     </Col>

In css , 

    .avatar{
  width: 135px;
  height: 135px;
  border: 0.18em solid #3f51b5;
}

state initialization and updation :

  this.state = { image: '' };

componentDidMount() {
const employees = this.props.employees;
let employee = {};
let employeeID = this.props.match.params.id;
employee = employees[employeeID];
setTimeout(() => {
  this.setState({
    image: employee.profilePicture
  });
}, 500);

}

enter image description here

enter image description here

Upvotes: 0

Views: 509

Answers (1)

Oleg
Oleg

Reputation: 78

Please make sure to load CSS file first. So image size always will be the same size.

width: 135px; height: 135px;

Upvotes: 2

Related Questions