Logo React

Nous allons vous présenter comment ajouter un logo dans l’application React.

Ajouter un logo dans React

De nos jours, chaque site web a son logo et ses images.

Lorsque nous construisons une application React, nous voulons d’abord changer le logo, et certaines personnes ont du mal à afficher l’image dans une application React. Nous aborderons l’affichage de votre logo dans une application React avec un simple code.

Tout d’abord, nous allons sauvegarder notre logo dans le dossier src. Une fois que nous avons enregistré notre logo, nous allons maintenant l’importer dans le fichier que nous voulons afficher.

Utilisez le code suivant pour importer le logo.

# react 
import logo from './logo.svg';

Une fois que nous aurons importé notre logo dans la page où nous voulons l’afficher, nous créerons une vue pour celui-ci.

# react
<img src={logo} className="App-logo" alt="logo">

Le diagramme ci-dessous retrace ce chemin du fichier dans src à l’image affichée.

Diagramme : fichier de logo dans src → import → l’élément img du composant → l’image affichée.

Dans le code fourni, on voit que dans l’attribut src, on appelle une variable {logo}. Cette variable affichera l'URL du logo que nous avons importé.

Nous écrirons le code CSS pour redimensionner le logo selon nos besoins.

# react
.App-logo{
    width: 150px;
}

Vérifions notre logo.

Production :

Nous avons maintenant appris à afficher facilement nos images ou logos dans l’application React.