Import af billeder med React

Introduktion

Når vi udvikler webapplikationer med React, ønsker vi typisk at inddrage visuelle elementer for at fange brugernes interesse. Disse visuelle elementer kan være enhver type billede, herunder JPG'er, PNG'er, SVG'er, GIF'er og mange andre.

I denne artikel vil vi lære, hvordan du importerer billeder med React og se de forskellige måder, dette kan opnås på.

Eksterne billeder og lokale billeder er de to typer billeder, vi ønsker at bruge i vores React-applikation. Vi er primært optaget af lokale billeder i denne artikel, fordi eksterne billeder ikke kræver, at vi importerer dem.

Eksterne billeder er billeder, der allerede er hostet eksternt og kan tilgås af alle via en URL, hvorimod lokale billeder er billeder, der kun er tilgængelige for os på vores lokale computer eller projektmappe, og som vi ønsker at bruge i vores applikation.

Sådan viser du billeder, der hostes eksternt

Før vi kommer ind på, hvordan man importerer billeder, er det vigtigt at forstå, at billeder hostet andre steder fungerer på samme måde, som vi altid har brugt billeder i HTML – ved at tilføje URL'en til src attribut for img tag:

const App = () => {
   return (
      <div>
         <img src="https://reactjs.org/logo-og.png" alt="React Logo" />
      </div>
   );
};

Lad os nu lære, hvordan vi kan importere (lokale) billeder med React!

Sådan importeres billeder med React

Bortset fra de eksterne billeder adskiller den måde billeder bruges i React sig væsentligt fra andre frameworks eller endda HTML. Disse billeder skal først importeres til React, før de kan bruges i vores applikation.

Dette kan opnås på to måder: ved at bruge import erklæring eller ved at bruge require() fungere. Vi vil gennemgå begge tilgange.

Sådan importeres billeder med React ved hjælp af importere Statement

Fordi det er lettere at læse og forstå import statement er den mest brugte metode til at importere lokalt lagrede billeder i React. Billederne behandles som standard eksporter, og når vi importerer dem, gør vi det på samme måde, som vi importerer komponenter. Dette gøres ved at angive den relative sti fra filen til det billede, vi importerer:

import Logo from './images/react-logo.png';

const App = () => {
   return (
      <div>
         <img src={Logo} alt="React Logo" />
      </div>
   );
};

I koden ovenfor bruger vi stadig img tag og src attribut, men denne gang src attribut modtager en variabel i stedet for en streng, som sendes ved hjælp af krøllede klammeparenteser i JSX.

Bemærk: Vi kan importere så mange billeder, som vi vil, men hvert billede skal have et unikt navn i importerklæringen, ellers vil det give en fejl.

Det er vigtigt at forstå, hvordan man specificerer og opnår relative stier til filer; ellers kan der opstå fejl og fejl. I det foregående eksempel blev billedet gemt i en /src/images.

Sådan importeres billeder med React ved hjælp af require()-funktionen

require() funktion er en Node.js-funktion, der bruges til at inkludere eksterne moduler fra andre filer end den aktuelle fil. Det fungerer på samme måde som import erklæring og giver os mulighed for at inkludere billeder:

let Logo = require('./images/react-logo.png');

const App = () => {
   return (
      <div>
         <img src={Logo} alt="React Logo" />
      </div>
   );
};

Den eneste forskel er den første linje, hvor vi krævede billedet via dets relative sti og derefter gemte det i en variabel, som vi fik adgang til i img tag via krøllede seler.

Vi kan også beslutte at gøre dette inline og undgå den ekstra linje, der bruges til at tildele billedet til en variabel, da det ikke er obligatorisk:

const App = () => {
   return (
      <div>
         <img src={require('./images/react-logo.png')} alt="React Logo" />
      </div>
   );
};

Konklusion

Vi lærte, hvordan man importerer lokale billeder ved hjælp af import erklæring og require() funktion i denne artikel.