Mehrere Möglichkeiten, Bilder in React-Projekte einzuführen

Der img-Tag führt das Bild ein

Da React die Seite tatsächlich über die JS-Reader-Funktion rendert, können Sie das Bild nicht direkt durch Schreiben von src="path" importieren.

Wir können Bilder genauso importieren wie Module

importiere img aus './../../../../asset/img/user.png'

Muss wie folgt eingeführt werden

<img src={require('../images/picture.png')} alt="Bezeichnung"/>

Einführung zum Hintergrundbild

1 Die erste besteht darin, auf reguläre Weise eine neue CSS-Datei zu erstellen und dann die CSS-Syntax direkt zu schreiben

.img {
   Hintergrund: URL('../images/picture.png') 0 0 keine Wiederholung;
}

2 Die zweite Möglichkeit besteht darin, es über Variablen in die Reaktionskomponente einzuführen und die Variablen dann direkt dem img-Tag zuzuweisen

// Bilddatei importieren import bg von '../images/bg.png'
// Definieren Sie ein Stilobjekt durch Zeichenfolgenverkettung const imgStyle = {
  Breite: '100%',
  Höhe: '500px',
  Hintergrundbild: 'url(' + bg + ')',
  Hintergrundposition: 'Mitte 0',
  Hintergrundgröße: '2045px 472px',
  Hintergrundwiederholung: „keine Wiederholung“
}
Klasse Home erweitert Komponente {
 Konstruktor () {
  super (Requisiten)
 }
 rendern() {
  //Zum Schluss die Variable direkt dem Tag <div style="imgStyle"> zuweisen
   ...
  </div>
 }
}

erfordern

Wir können den relativen Pfad auch mit require umschließen und ihn direkt src zuweisen, genau wie in vue.

<img Breite="100" Höhe="100" Quelle={erfordernis('./../../../../asset/img/user.png')} alt="" Klassenname={'user-img'}/>

**Hinweis:** Hier liegt ein Problem vor, da es aufgrund unterschiedlicher Versionen der Dateiladebibliothek einige geringfügige Unterschiede gibt. In höheren Versionen der Dateiladerbibliothek ist esModule standardmäßig auf „true“ gesetzt und require gibt ein ES-Modul anstelle eines Stringpfads zurück. Das Standardattribut dieses ES-Moduls ist ein String-Pfad und sollte daher folgendermaßen geschrieben werden:

<img Breite="100" Höhe="100" Quelle={erfordernis('./../../../../asset/img/user.png').default} alt="" Klassenname={'user-img'}/>

Wir müssen uns keine Gedanken über die Version unseres Dateiladers machen. Wenn wir require direkt verwenden und das Bild trotzdem nicht normal anzeigen können, können wir nach require .default hinzufügen.

Damit ist dieser Artikel über verschiedene Möglichkeiten zum Einfügen von Bildern in React-Projekte abgeschlossen. Weitere relevante Inhalte zum Einfügen von Bildern in React finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!