javascript - react - Establecer una imagen de fondo con Reaccionar estilos en línea

reactjs background

Question

Estoy tratando de acceder a una imagen estática para usar dentro de una propiedad backgroundImage línea dentro de React. Desafortunadamente, me he quedado seco sobre cómo hacer esto.

En general, pensé que acababas de hacer 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 etiquetas <img> . ¿Alguien puede explicar la diferencia entre los dos?

Ejemplo:

<img src={ Background } /> funciona bien.

¡Gracias!

Answer 1

Estilo en línea para configurar cualquier imagen a 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''
}}

Answer 2

Las llaves dentro de la propiedad backgroundImage son incorrectas.

Probablemente esté utilizando webpack junto con el cargador de archivos de imagen, por lo que Background ya debería ser una cadena: backgroundImage: "url(" + Background + ")"

También puede usar las plantillas de cadena ES6 como se muestra a continuación para lograr el mismo efecto:

backgroundImage: `url(${Background})`

Answer 3

Puede usar Template Literals (encerrado con tick de retroceso: `...`) para backgroundImage propiedad backgroundImage como esta:

backgroundImage: `url(${Background})`

Answer 4

Si está utilizando ES5:

backgroundImage: "url(" + Background + ")"

Si está utilizando ES6:

backgroundImage: `url(${Background})`

Básicamente, eliminar las llaves innecesarias mientras se agrega valor a las obras de propiedad backgroundImage funcionará.

Answer 5

También puede llevar la imagen al componente utilizando la función require() .

<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 objeto