HOWTO · React
React-Logo
Dieses Tutorial zeigt, wie man ein Logo in React hinzufügt.
Auf dieser Seite
Wir werden vorstellen, wie man ein logo in der React-Anwendung hinzufügt.
Logo in React hinzufügen
Heutzutage hat jede Website ihr logo und ihre Bilder.
Wenn wir eine React-App erstellen, möchten wir zuerst das Logo ändern, und einige Leute finden es schwierig, das Bild in einer React-App anzuzeigen. Wir besprechen die Anzeige Ihres Logos in einer React-Anwendung mit einem einfachen Code.
Zuerst speichern wir unser logo im Ordner src. Nachdem wir unser Logo gespeichert haben, importieren wir es jetzt in die Datei, in der wir es anzeigen möchten.
Verwenden Sie den folgenden Code, um das Logo zu importieren.
# react
import logo from './logo.svg';
Sobald wir unser Logo in die Seite importiert haben, auf der wir es anzeigen möchten, erstellen wir eine Ansicht dafür.
# react
<img src={logo} className="App-logo" alt="logo">
Das folgende Diagramm zeichnet diesen Weg von der Datei in src bis zum angezeigten Bild nach.
Diagramm: Logo-Datei in src → Import → das img-Element der Komponente → das angezeigte Bild.
Im bereitgestellten Code können wir sehen, dass wir im Attribut src eine Variable {logo} aufrufen. Diese Variable gibt die URL des importierten Logos aus.
Wir schreiben den CSS-Code, um die Größe des Logos an unsere Bedürfnisse anzupassen.
# react
.App-logo{
width: 150px;
}
Lassen Sie uns unser Logo überprüfen.
Ausgabe:
Wir haben jetzt gelernt, wie wir unsere Bilder oder Logos einfach in der React-Anwendung anzeigen können.
