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!

javascript reactjs

— Kris
quelle

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.

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