0
202
VistasReaccionar fondo div en reaccionar sin renderizar
Tengo un accesorio inyectado en mi componente llamado headerImage. Sé que está ahí porque cuando lo coloco en el HTML del componente así:
<h1>Hello, {headerImage}</h1>Representa el URI correcto de la imagen en el fragmento anterior.
Sin embargo, cuando lo coloco en mi estilo de fondo div, no se renderizará por alguna razón:
<div className="hide-on-mobile center-image" style={{ backgroundImage: `url({headerImage})`, backgroundSize: "cover", backgroundRepeat: "no-repeat", backgroundPosition: "right", width: "100%", height: "auto", }} ></div>Lo veo en las herramientas de desarrollo que no se evalúan correctamente:
¿Qué estoy haciendo mal aquí?
2 Respuestas
Responde la pregunta0
Creo que es posible que te falte una evaluación $ antes de intentar pasar ${headerImage} .
<div className="hide-on-mobile center-image" style={{ backgroundImage: `url(${headerImage})`, backgroundSize: "cover", backgroundRepeat: "no-repeat", backgroundPosition: "right", width: "100%", height: "auto", }} ></div>0
Entonces, para anidar variables dentro de un atributo, debe citar todo el atributo, luego inyectar una variable interpretada usando la notación ${} .
Esta es la misma técnica que usaría si necesita inyectar más de un nombre de clase. Dado que ese es un ejemplo más simple, permítame compartirlo primero, que puede tener más sentido debido a la simplicidad y que usa dos variables en lugar de solo una, luego lo expandiré a su atributo.
Entonces, para empezar, tengo una fuente css vinculada a mi componente. Incluyo esto para que sepa dónde se define "estilos". import styles from './PageHeader.module.css';
Luego, dentro de mi componente, donde uso los dos nombres de clase de "estilos":
<span className={`${styles.left} ${styles.headerlink}`}> Observe className={} tiene la comilla de tilde invertida dentro de {} .
Entonces, para extender a su atributo:
className="hide-on-mobile center-image" style={` backgroundImage: "url(${headerImage})", backgroundSize: "cover", backgroundRepeat: "no-repeat", backgroundPosition: "right", width: "100%", height: "auto" `}Espero que eso ayude.