React-Logo

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">

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.