Festlegen eines Hintergrundbilds mit Inline-Stilen reagieren

286

Ich versuche, auf ein statisches Bild zuzugreifen, um es in einer Inline- backgroundImageEigenschaft in React zu verwenden. Leider bin ich trocken gelaufen, wie das geht.

Im Allgemeinen dachte ich, Sie haben einfach Folgendes getan:

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

Dies funktioniert für <img>Tags. Kann jemand den Unterschied zwischen den beiden erklären?

Beispiel:

<img src={ Background } /> funktioniert gut.

Danke dir!

Kris
quelle

Antworten:

471

Die geschweiften Klammern in der Eigenschaft backgroundImage sind falsch.

Wahrscheinlich verwenden Sie das Webpack zusammen mit dem Loader für Bilddateien, daher sollte der Hintergrund bereits eine Zeichenfolge sein: backgroundImage: "url(" + Background + ")"

Sie können auch die folgenden ES6-Zeichenfolgenvorlagen verwenden, um den gleichen Effekt zu erzielen:

backgroundImage: `url(${Background})`
rgommezz
quelle
Ich hätte das meiner Frage hinzufügen sollen. Ich habe eine Breite und Höhe eingestellt (100% / 400px). Das Problem ist, wie Reagiert mit statischen Bildern umgeht, glaube ich.
Kris
Sollte man vor der Verkettung den Zeichen '(",') 'und Leerzeichen in der Hintergrundvariablen gemäß w3.org/TR/CSS2/syndata.html#value-def-uri entkommen ?
qbolec
49
Die vollständige Syntax sollte folgendermaßen aussehen:style={{backgroundImage: "url(" + Background + ")"}}
Mike
2
Um den Kommentar von @ mike zu erweitern, benötigen Sie doppelte geschweifte Klammern, da eine für React in den JS-Modus und eine für das neue Objekt verwendet werden soll.
Ciprian Tomoiagă
Ich erhalte die Fehlermeldung 'Abschnitt' wird definiert, aber nie verwendet ', nachdem ich diesen Importhintergrund von' ./background.jpg 'angegeben habe. var sectionStyle = {width: "100%", height: "400px", backgroundImage: url(${Background})}; Klasse Abschnitt erweitert Komponente {render () {return (<section style = {sectionStyle}> </ section>); }}
Pavanan MS
40

Wenn Sie ES5 verwenden -

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

Wenn Sie ES6 verwenden -

backgroundImage: `url(${Background})`

Grundsätzlich funktioniert es, unnötige geschweifte Klammern zu entfernen, während Sie den Eigenschaften von backgroundImage einen Mehrwert hinzufügen.

Rushikesh Bharad
quelle
2
Für mich in ES6 war es so backgroundImage: `url("${Background}")`, da Ihr ES6-Beispiel für mich nicht funktioniert hat.
S ..
37

Inline-Stil zum Einstellen eines Bilds im Vollbildmodus:

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
quelle
17

Sie können das Bild auch mithilfe der require()Funktion in die Komponente einfügen.

<div style={{ backgroundImage: `url(require("images/img.svg"))` }}>

Beachten Sie die beiden geschweiften Klammern . Der erste Satz dient zum Aufrufen des Reaktionsmodus und der zweite zum Bezeichnen des Objekts

Tricky
quelle
Was ist, wenn der Bildpfad eine Web-URL anstelle eines lokalen Pfads ist? So etwas wiehttps://images.com/myimage.png
Aminu Kano
3
Ok, ich verstehe, wenn Sie eine webbasierte URL verwenden. Ich sollte nur schreibenurl(https://images.com/myimage.png)
Aminu Kano
4

Sie können stattdessen Vorlagenliterale (eingeschlossen mit dem Back-Tick: `...`) für backgroundImageEigenschaften wie diese verwenden:

backgroundImage: `url(${Background})`
Fawaz Abdulla
quelle
3

Versuche dies:

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

Für mich hat es funktioniert, es so zu haben

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

Sie können versuchen, usimg

backgroundImage: url(process.env.PUBLIC_URL + "/      assets/image_location")
Jamilur Rahman
quelle
Dies wird nicht empfohlen, da dadurch verhindert wird, dass das Webpack das Asset kennt. Dies führt zu einem Cache-Fehler, wenn die Reaktions-App offline geöffnet wird.
Thomas Kekeisen