Background image not rendereing from props

[alluster]

Hi, I'm having problems with rendering my BG in the lazy-hero!... can you help me figure ot the reason for this? Thank you!

This is how the browser looks:

This is my index where I import my Hero.js:

In Hero.js I import lazy-hero

Do you have an idea about why the background-image: attribute doesn't show the picture?

[danistefanovic]

It looks like that the opacity is not switched from 0 to 1. This happens if the image is not loaded or the hero component is not in the viewport. Are there any errors in the browser console?

[alluster]

There were warnings about the imageSrc={} supposed to be a string value in initial state in the parent component, which in my case was actually a boolean but changing this did not help. Also changed the opacity from string to a number due some warnings. Now when I console.log(heroImage) in the child component Hero.js right before it's supposed to throw it to the imageSrc={}, console shows that it renders empty few times. This is due my parent component gets the image from source later than the hero actually renders maybe? I'm not sure how to fix this..

[danistefanovic]

Can you test it with the newest version ([email protected])?

[alluster]

Great thanks, works like a charm now!