Establecer una imagen de fondo con estilos en línea de React
Estoy intentando acceder a una imagen estática para usarla dentro de una backgroundImagepropiedad en línea dentro de React. Desafortunadamente, no sé cómo hacer esto.
En general, pensé que habías hecho lo siguiente:
import Background from '../images/background_image.png';
var sectionStyle = {
width: "100%",
height: "400px",
backgroundImage: "url(" + { Background } + ")"
};
class Section extends Component {
render() {
return (
<section style={ sectionStyle }>
</section>
);
}
}
Esto funciona para <img>etiquetas. ¿Alguien puede explicar la diferencia entre los dos?
Ejemplo:
<img src={ Background } />Funciona bien.
¡Gracias!
Las llaves dentro de la propiedad backgroundImage son incorrectas.
Probablemente esté utilizando el paquete web junto con el cargador de archivos de imagen, por lo que el fondo ya debería ser una cadena:
backgroundImage: "url(" + Background + ")"
También puede utilizar plantillas de cadenas de ES6 como se muestra a continuación para lograr el mismo efecto:
backgroundImage: `url(${Background})`
Estilo en línea para configurar cualquier imagen en pantalla completa:
style={{
backgroundImage: "url(" + "https://images.pexels.com/photos/34153/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350" + ")",
backgroundPosition: 'center',
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat'
}}
Si está utilizando ES5 -
backgroundImage: "url(" + Background + ")"
Si está utilizando ES6 -
backgroundImage: `url(${Background})`
Básicamente, eliminar llaves innecesarias y agregar valor a la propiedad backgroundImage funcionará.
También puede traer la imagen al componente usando la require()función.
<div style={{ backgroundImage: `url(require("images/img.svg"))` }}>
Tenga en cuenta los dos conjuntos de llaves . El primer conjunto es para ingresar al modo de reacción y el segundo es para denotar el objeto.
Esto funciona para mi:
import Background from '../images/background_image.png';
<div className=...
style={{
background: `url(${Background})`,
}}
>...</div>
