Ich versuche, auf ein statisches Bild zuzugreifen, um es in einer Inline- backgroundImage
Eigenschaft 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
quelle
style={{backgroundImage: "url(" + Background + ")"}}
url(${Background})
}; Klasse Abschnitt erweitert Komponente {render () {return (<section style = {sectionStyle}> </ section>); }}Wenn Sie ES5 verwenden -
Wenn Sie ES6 verwenden -
Grundsätzlich funktioniert es, unnötige geschweifte Klammern zu entfernen, während Sie den Eigenschaften von backgroundImage einen Mehrwert hinzufügen.
quelle
backgroundImage: `url("${Background}")`
, da Ihr ES6-Beispiel für mich nicht funktioniert hat.Inline-Stil zum Einstellen eines Bilds im Vollbildmodus:
quelle
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
quelle
https://images.com/myimage.png
url(https://images.com/myimage.png)
Sie können stattdessen Vorlagenliterale (eingeschlossen mit dem Back-Tick: `...`) für
backgroundImage
Eigenschaften wie diese verwenden:quelle
Versuche dies:
quelle
Für mich hat es funktioniert, es so zu haben
quelle
Sie können versuchen, usimg
quelle