Configuración de un backgroundImage With React Inline Styles

Estoy intentando acceder a una imagen estática para utilizar dentro de una propiedad backgroundImage línea en React. Desafortunadamente, me he quedado sin información sobre cómo hacer esto.

En general, pensé que acaba de hacer lo siguiente:

 import Background from '../images/background_image.png'; var sectionStyle = http://sofes.miximages.com/javascript/{ width: "100%", height: "400px", backgroundImage: "url(" + http://sofes.miximages.com/javascript/{ Background } + ")" }; class Section extends Component http://sofes.miximages.com/javascript/{ render() http://sofes.miximages.com/javascript/{ return ( 
); } }

Esto funciona para las tags . ¿Alguien puede explicar la diferencia entre los dos?

Ejemplo:

funciona bien.

¡Gracias!

Las llaves dentro de la propiedad backgroundImage son incorrectas.

Probablemente estés usando un paquete web junto con el cargador de archivos de imagen, por lo que el fondo ya debería ser un String: backgroundImage: "url(" + Background + ")"

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

 backgroundImage: `url(${Background})` 

Si está utilizando ES5 –

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

Si está utilizando ES6 –

 backgroundImage: `url(${Background})` 

Básicamente, eliminar las llaves innecesarias al agregar valor a las propiedades de la imagen de fondo funcionará.

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

** Tenga en cuenta los dos conjuntos de llaves.