web-dev-qa-db-ger.com

Hintergrundbild einstellen Mit React Inline Styles

Ich versuche, auf ein statisches Bild zuzugreifen, das in einer Inline-Eigenschaft backgroundImage in React verwendet werden soll. Leider bin ich dabei völlig trocken gelaufen.

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 einwandfrei.

Danke!

javascriptreactjs
197
Kris

Die geschweiften Klammern in der backgroundImage-Eigenschaft sind falsch.

Wahrscheinlich verwenden Sie das Webpack zusammen mit dem Ladeprogramm für Bilddateien. Der Hintergrund sollte also bereits ein String sein: backgroundImage: "url(" + Background + ")"

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

backgroundImage: `url(${Background})`
339
rgommezz

Wenn Sie ES5 verwenden -

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

Wenn Sie ES6 verwenden -

backgroundImage: `url(${Background})`

Grundsätzlich können Sie unnötige geschweifte Klammern entfernen, während Sie der backgroundImage-Eigenschaft works einen Mehrwert hinzufügen.

23
Rushikesh Bharad

Inline-Stil, um ein Bild als Vollbild festzulegen:

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'
}}
15
Hitesh Sahu

Sie können das Bild auch mithilfe der Funktion require() 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 von Objekten

11
Tricky

Sie können stattdessen Vorlagenliterale (eingeschlossen mit einem Back-Tick: `...`) für die Eigenschaft backgroundImage wie folgt verwenden:

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