Impostazione di uno sfondoImmagine con stili in linea React

290

Sto cercando di accedere a un'immagine statica da utilizzare all'interno di una backgroundImageproprietà inline all'interno di React. Sfortunatamente, mi sono esaurito su come farlo.

In generale, ho pensato che avessi fatto semplicemente come segue:

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>
    );
  }
}

Questo funziona per i <img>tag. Qualcuno può spiegare la differenza tra i due?

Esempio:

<img src={ Background } /> funziona benissimo.

Grazie!

javascript reactjs

— Kris
fonte

476

Le parentesi graffe all'interno della proprietà backgroundImage sono errate.

Probabilmente stai usando webpack insieme al caricatore di file di immagini, quindi Background dovrebbe essere già una stringa: backgroundImage: "url(" + Background + ")"

È inoltre possibile utilizzare i modelli di stringa ES6 come di seguito per ottenere lo stesso effetto:

backgroundImage: `url(${Background})`

— rgommezz
fonte

Avrei dovuto aggiungerlo alla mia domanda. Ho impostato una larghezza e un'altezza (rispettivamente 100% / 400px). Credo che il problema che sorge sia dovuto al modo in cui la reazione gestisce le immagini statiche.

— Kris,

Si dovrebbe sfuggire ai caratteri '(",') 'e spazi bianchi nella variabile Background prima della concatenazione come da w3.org/TR/CSS2/syndata.html#value-def-uri ?

— qbolec

50

La sintassi completa dovrebbe assomigliare a questa:style={{backgroundImage: "url(" + Background + ")"}}

— microfono

2

solo per espandere il commento di @mike, hai bisogno di doppie parentesi graffe perché una deve entrare in React è la modalità JS e una è per indicare il nuovo oggetto.

— Ciprian Tomoiagă,

Ricevo l'errore "Sezione" definito ma mai usato "dopo aver dato questo Background di importazione da" ./background.jpg "; var sectionStyle = {larghezza: "100%", altezza: "400px", backgroundImage: url(${Background})}; La sezione class estende il componente {render () {return (<section style = {sectionStyle}> </section>); }}

— Pavanan MS

41

Se si utilizza ES5 -

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

Se si utilizza ES6 -

backgroundImage: `url(${Background})`

Fondamentalmente rimuovendo le parentesi graffe non necessarie mentre aggiungendo valore alle opere di proprietà backgroundImage funzionerà.

— Rushikesh Bharad
fonte

2

Per me in ES6 lo è stato backgroundImage: `url("${Background}")`, poiché il tuo esempio ES6 non ha funzionato per me.

— S ..

Ciao Bharad, come faresti se vuoi aggiungere più di un'immagine di sfondo. Dire per due immagini come lo faresti? Grazie

— Sulla strada del successo il

37

Stile in linea per impostare qualsiasi immagine a schermo intero:

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
fonte

17

Puoi anche portare l'immagine nel componente usando la require()funzione.

Nota i due set di parentesi graffe . Il primo set serve per accedere alla modalità di reazione e il secondo per indicare l'oggetto

— Difficile
fonte

Che cosa succede se il percorso dell'immagine è un URL Web anziché un percorso locale? Qualcosa di similehttps://images.com/myimage.png

— Aminu Kano,

3

Ok, ho capito, quando si utilizza l'URL basato sul web. Dovrei solo scrivereurl(https://images.com/myimage.png)

— Aminu Kano,

4

Puoi usare Template Literals (racchiuso da back-tick: `...`) invece per backgroundImageproprietà come questa:

backgroundImage: `url(${Background})`

— Fawaz Abdulla
fonte

3

prova questo:

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

— Hamza Khan
fonte

2

Per me ciò che ha funzionato è averlo così

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

— brianokinyi
fonte

-1

Puoi provarci

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

— Jamilur Rahman
fonte

Questo non è raccomandato poiché impedirà al webpack di conoscere la risorsa. Questo termina con un errore nella cache se l'app di reazione viene aperta offline.

— Thomas Kekeisen,