0
394
VistasLa imagen de fondo no se representa en el servidor (nextjs)
Estoy usando NextJs. Quiero aplicar una imagen de fondo en el cuerpo y debería representarse en el lado del servidor.
Aquí está mi código
A continuación se muestra mi App.js
import BodyStyle from '@components/Bodystyle'; return ( <> <BodyStyle bgColor={`url("picture-url")`} /> <>);Aquí está mi BodyStyle.js
const BodyStyle = (props) => { const { bgColor } = props; return ( <Head> <style>{`body { background: ${bgColor} no-repeat center center fixed; background-size: cover;`}</style> </Head> );El fondo se aplica al cuerpo pero no desde SSR
Pero hay un giro si solo copio el código de BodyStyles.js y lo pego en app.js , la imagen de fondo se ve bien en el servidor
Aquí está el código de ejemplo de App.js
import Head from 'next/head'; return ( <Head> <style>{`body { background: url(${url}) no-repeat center center fixed; background-size: cover;`}</style> </Head> ); Capturas de pantalla adjuntas Sin antecedentes en SSR 
Con el trasfondo de SSR 
¿Qué podría ser un problema? Alguna ayuda
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Creo que es porque usas para configurar bgcolor cuando aún no hay accesorios, intenta usarlo dentro de un useEffect o como este código:
const BodyStyle = ({bgColor}) => { return ( <Head> <style>{`body { background: ${bgColor} no-repeat center center fixed; background-size: cover;`}</style> </Head> );
·
Juan Pablo Isaza
Denunciar
Responde la pregunta