Beskrivning

När vi utvecklar webbapplikationer med React vill vi vanligtvis inkludera visuella element för att fånga användarnas intresse. Dessa visuella element kan vara vilken typ av bild som helst, inklusive JPG, PNG, SVG, GIF och många andra.

I den här artikeln kommer vi att lära oss hur man importerar bilder med React och se de olika sätten detta kan uppnås.

Externa bilder och lokala bilder är de två typer av bilder vi vill använda i vår React-applikation. Vi är främst angelägna om lokala bilder i den här artikeln eftersom externa bilder inte kräver att vi importerar dem.

Externa bilder är bilder som redan har hostats externt och som kan nås av vem som helst via en URL, medan lokala bilder är bilder som bara är tillgängliga för oss på vår lokala dator eller projektmapp och som vi vill använda i vår applikation.

Hur man visar bilder som är värd externt

Innan vi går in på hur man importerar bilder är det viktigt att förstå att bilder som finns på andra ställen fungerar på samma sätt som vi alltid har använt bilder i HTML – genom att lägga till webbadressen till src attribut för img märka:

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

Låt oss nu lära oss hur vi kan importera (lokala) bilder med React!

Hur man importerar bilder med React

Bortsett från de externa bilderna skiljer sig sättet som bilder används i React avsevärt från det i andra ramverk eller till och med HTML. Dessa bilder måste först importeras till React innan de kan användas i vår applikation.

Detta kan åstadkommas på två sätt: genom att använda import uttalande eller genom att använda require() fungera. Vi kommer att gå igenom båda tillvägagångssätten.

Hur man importerar bilder med React med hjälp av importera .

Eftersom det är lättare att läsa och förstå import statement är den mest använda metoden för att importera lokalt lagrade bilder i React. Bilderna behandlas som standardexporter, och när vi importerar dem gör vi det på samma sätt som vi importerar komponenter. Detta görs genom att ange den relativa sökvägen från filen till bilden vi importerar:

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

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

I koden ovan använder vi fortfarande img tagga och src attribut, men den här gången src attribut tar emot en variabel snarare än en sträng, som skickas med hjälp av hängslen i JSX.

Notera: Vi kan importera så många bilder som vi vill, men varje bild måste ha ett unikt namn i importsatsen, annars kommer det att skapa ett fel.

Det är viktigt att förstå hur man specificerar och erhåller relativa sökvägar för filer; annars kan buggar och fel uppstå. I föregående exempel sparades bilden i en /src/images.

Hur man importerar bilder med React med funktionen require()

Smakämnen require() funktion är en Node.js-funktion som används för att inkludera externa moduler från andra filer än den aktuella filen. Det fungerar på samma sätt som import uttalande och tillåter oss att inkludera bilder:

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

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

Den enda skillnaden är den första raden där vi krävde bilden via dess relativa sökväg och sedan lagrade den i en variabel som vi fick åtkomst till i img tagga via lockiga hängslen.

Vi kan också välja att göra detta inline och undvika den extra raden som används för att tilldela bilden till en variabel, eftersom det inte är obligatoriskt:

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

Slutsats

Vi lärde oss hur man importerar lokala bilder med hjälp av import uttalande och require() funktion i den här artikeln.