Introductie

Bij het ontwikkelen van webapplicaties met React willen we meestal visuele elementen opnemen om de interesse van de gebruikers te wekken. Deze visuele elementen kunnen elk type afbeelding zijn, inclusief JPG's, PNG's, SVG's, GIF's en vele andere.

In dit artikel leren we hoe je afbeeldingen kunt importeren met React en bekijken we de verschillende manieren waarop dit kan worden bereikt.

Externe afbeeldingen en lokale afbeeldingen zijn de twee soorten afbeeldingen die we willen gebruiken in onze React-toepassing. In dit artikel houden we ons voornamelijk bezig met lokale afbeeldingen, omdat we ze niet hoeven te importeren voor externe afbeeldingen.

Externe afbeeldingen zijn afbeeldingen die al extern zijn gehost en voor iedereen toegankelijk zijn via een URL, terwijl lokale afbeeldingen afbeeldingen zijn die alleen voor ons beschikbaar zijn op onze lokale computer of projectmap en die we in onze applicatie willen gebruiken.

Extern gehoste afbeeldingen weergeven

Voordat we ingaan op het importeren van afbeeldingen, is het belangrijk om te begrijpen dat afbeeldingen die elders worden gehost op dezelfde manier werken als we afbeeldingen in HTML altijd hebben gebruikt - door de URL toe te voegen aan de src attribuut van de img label:

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

Laten we nu leren hoe we (lokale) afbeeldingen kunnen importeren met React!

Afbeeldingen importeren met React

Afgezien van de externe afbeeldingen, verschilt de manier waarop afbeeldingen in React worden gebruikt aanzienlijk van die van andere frameworks of zelfs HTML. Deze afbeeldingen moeten eerst in React worden geïmporteerd voordat ze in onze applicatie kunnen worden gebruikt.

Dit kan op twee manieren worden bereikt: door gebruik te maken van de import verklaring of met behulp van de require() functie. We zullen beide benaderingen bespreken.

Afbeeldingen importeren met React met behulp van de importeren Statement

Omdat het gemakkelijker te lezen en te begrijpen is, import statement is de meest gebruikte methode voor het importeren van lokaal opgeslagen afbeeldingen in React. De afbeeldingen worden behandeld als: standaard export, en wanneer we ze importeren, doen we dat op dezelfde manier als we componenten importeren. Dit wordt gedaan door het relatieve pad van het bestand naar de afbeelding die we importeren op te geven:

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

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

In de bovenstaande code gebruiken we nog steeds de img tag en src attribuut, maar deze keer de src attribuut ontvangt een variabele in plaats van een tekenreeks, die wordt doorgegeven met accolades in JSX.

Opmerking: We kunnen zoveel afbeeldingen importeren als we willen, maar elke afbeelding moet een unieke naam hebben in de importinstructie, anders zal er een fout optreden.

Het is belangrijk om te begrijpen hoe u relatieve paden voor bestanden kunt specificeren en verkrijgen; anders kunnen er bugs en fouten optreden. In het voorgaande voorbeeld is de afbeelding opgeslagen in een /src/images.

Afbeeldingen importeren met React met behulp van de functie required ()

De require() functie is een Node.js-functie die wordt gebruikt om externe modules uit andere bestanden dan het huidige bestand op te nemen. Het werkt op dezelfde manier als de import verklaring en stelt ons in staat om afbeeldingen op te nemen:

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

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

Het enige verschil is de eerste regel waar we de afbeelding nodig hadden via het relatieve pad en deze vervolgens opsloegen in een variabele waartoe we toegang hadden in de img tag via accolades.

We kunnen er ook voor kiezen om dit inline te doen en de extra regel te vermijden die wordt gebruikt om de afbeelding aan een variabele toe te wijzen, aangezien dit niet verplicht is:

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

Conclusie

We hebben geleerd hoe we lokale afbeeldingen kunnen importeren met behulp van de import verklaring en de require() functie in dit artikel.