const BackgroundImage = styled.div` background: url(${(props) => props.backgroundImage}) no-repeat center center; } Utilizo div en el componente de estilo, pero tiene un problema de parpadeo al esperar a que aparezca la imagen. ¿Hay alguna solución de carga diferida que use el div del componente con estilo?
Cree un contenedor alrededor de su componente con estilo que no muestre el div hasta que se cargue la imagen.
Puede lograr esto creando una imagen temporal, espere a que se cargue y luego dígale al componente que la imagen está lista y se puede mostrar.
const BackgroundImage = styled.div` background: url(${(props) => props.backgroundImage}) no-repeat center center; `; const LazyBackgroundImage = ({ src, children }) => { const [isLoaded, setIsLoaded] = useState(false); useEffect(() => { const image = new Image(); image.addEventListener('load', () => setIsLoaded(true)); image.src = src; }, [src]); if (!isLoaded) { return null; } return ( <BackgroundImage backgroundImage={src}> {children} </BackgroundImage> ); };Usa el envoltorio así:
<LazyBackgroundImage src="path/to/your-image.jpg"> <p>Hi there</p> </LazyBackgroundImage>