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

290

Estoy tratando de acceder a una imagen estática para usar dentro de una backgroundImagepropiedad en 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 las <img>etiquetas. ¿Alguien puede explicar la diferencia entre los dos?

Ejemplo:

<img src={ Background } /> funciona bien

¡Gracias!

javascript reactjs

— Kris
fuente

476

Las llaves dentro de la propiedad backgroundImage son incorrectas.

Probablemente esté utilizando webpack 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 usar las plantillas de cadena ES6 como se muestra a continuación para lograr el mismo efecto:

backgroundImage: `url(${Background})`

— rgommezz
fuente

Debería haber agregado eso a mi pregunta. Tengo un conjunto de ancho y alto (100% / 400px respectivamente). El problema que surge se debe a cómo reacciona maneja las imágenes estáticas, creo.

— Kris

¿Se debe escapar de los caracteres '(",') 'y espacios en blanco en la variable Fondo antes de la concatenación según w3.org/TR/CSS2/syndata.html#value-def-uri ?

— qbolec

50

Sintaxis completa debe tener este aspecto:style={{backgroundImage: "url(" + Background + ")"}}

— Mike

2

solo para expandir el comentario de @ mike, necesita llaves dobles porque una es para que React ingrese es el modo JS y otra es para denotar el nuevo objeto.

— Ciprian Tomoiagă

Me aparece el error 'Sección', pero nunca se usa 'después de dar esta importación Fondo de' ./background.jpg '; var sectionStyle = {ancho: "100%", altura: "400px", backgroundImage: url(${Background})}; clase Sección extiende Componente {render () {return (<section style = {sectionStyle}> </section>); }}

— Pavanan MS

41

Si está utilizando ES5:

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

Si está utilizando ES6:

backgroundImage: `url(${Background})`

Básicamente, la eliminación de llaves innecesarias mientras se agrega valor a la propiedad backgroundImage funciona.

— Rushikesh Bharad
fuente

2

Para mí en ES6 fue backgroundImage: `url("${Background}")`, ya que su ejemplo de ES6 no funcionó para mí.

— S ..

Hola Bharad, ¿cómo lo harías si quisieras agregar más de una imagen de fondo? Digamos para dos imágenes, ¿cómo harías esto? Gracias

— En camino al éxito

37

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'
}}

— Hitesh Sahu
fuente

17

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

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

— Difícil
fuente

¿Qué sucede si la ruta de la imagen es una URL web en lugar de una ruta local? Algo así comohttps://images.com/myimage.png

— Aminu Kano el

3

Ok, entiendo, cuando utilizo una URL basada en la web. Debería escribirurl(https://images.com/myimage.png)

— Aminu Kano, el

4

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

backgroundImage: `url(${Background})`

— Fawaz Abdulla
fuente

3

prueba esto:

style={{ backgroundImage: `url(require("path/image.ext"))` }}

— Hamza Khan
fuente

2

Para mí lo que funcionó es tenerlo así

style={{ backgroundImage: `url(${require("./resources/img/banners/3.jpg")})` }}

— brianokinyi
fuente

-1

Puedes probar usimg

backgroundImage: url(process.env.PUBLIC_URL + "/      assets/image_location")

— Jamilur Rahman
fuente

Esto no se recomienda ya que evitará que webpack conozca el activo. Esto terminará en una pérdida de caché si la aplicación de reacción se abre sin conexión.

— Thomas Kekeisen