Handle image loading in React

Viewed 9712

I'm using this code to load images

{Image} from 'react-bootstrap';
<Image src={res.imgUrl} className={styles.image} onError={(e)=>{e.target.src="/defaultImage.png"}} responsive thumbnail />
<Label bsStyle="primary" className={styles.price}}>{Price} &#8364;</Label>

Here is the css code for the label

.price {
      position: absolute;
      top: 0;
      right: 0;
      font-size: 0.95em;
    }

It works fine. But during loading the "Label"-Element shows up not nicely, since there is no image yet that has been loaded and it have not enough place to show up.

Is there a nice solution for this?

Thanks!

PS: It looks like this during loading

enter image description here

1 Answers
Related