Importarea imaginilor cu React

Introducere

Când dezvoltăm aplicații web cu React, de obicei dorim să includem elemente vizuale pentru a capta interesul utilizatorilor. Aceste elemente vizuale pot fi orice tip de imagine, inclusiv JPG-uri, PNG-uri, SVG-uri, GIF-uri și multe altele.

În acest articol, vom învăța cum să importam imagini cu React și vom vedea diferitele moduri în care se poate realiza acest lucru.

Imaginile externe și imaginile locale sunt cele două tipuri de imagini pe care dorim să le folosim în aplicația noastră React. Ne preocupă în primul rând imaginile locale din acest articol, deoarece imaginile externe nu necesită să le importăm.

Imaginile externe sunt imagini care au fost deja găzduite extern și pot fi accesate de oricine printr-o adresă URL, în timp ce imaginile locale sunt imagini care ne sunt disponibile numai pe computerul nostru local sau folderul de proiect și pe care dorim să le folosim în aplicația noastră.

Cum să afișați imagini găzduite extern

Înainte de a trece la modul de importare a imaginilor, este important să înțelegem că imaginile găzduite în altă parte funcționează în același mod în care am folosit întotdeauna imaginile în HTML - prin adăugarea adresei URL la src atribut al img etichetă:

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

Să aflăm acum cum putem importa imagini (locale) cu React!

Cum să importați imagini cu React

În afară de imaginile externe, modul în care sunt utilizate imaginile în React diferă semnificativ de cel al altor cadre sau chiar HTML. Aceste imagini trebuie mai întâi importate în React înainte de a putea fi utilizate în aplicația noastră.

Acest lucru poate fi realizat în două moduri: prin utilizarea import declarație sau utilizând require() funcţie. Vom trece peste ambele abordări.

Cum să importați imagini cu React folosind import Declarație

Pentru că este mai ușor de citit și de înțeles, import declarația este cea mai folosită metodă pentru importarea imaginilor stocate local în React. Imaginile sunt tratate ca exporturi implicite, iar când le importăm, o facem în același mod în care importăm componente. Acest lucru se face prin specificarea căii relative de la fișier la imaginea pe care o importăm:

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

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

În codul de mai sus, folosim în continuare img etichetă și src atribut, dar de data aceasta src atributul primește o variabilă mai degrabă decât un șir, care este transmis folosind acolade în JSX.

Notă: Putem importa câte imagini dorim, dar fiecare imagine trebuie să aibă un nume unic în instrucțiunea de import, altfel va genera o eroare.

Este important să înțelegeți cum să specificați și să obțineți căi relative pentru fișiere; în caz contrar, pot apărea erori și erori. În exemplul precedent, imaginea a fost salvată într-un /src/images.

Cum să importați imagini cu React folosind funcția require().

require() funcția este o funcție Node.js care este utilizată pentru a include module externe din fișiere altele decât fișierul curent. Funcționează în același mod ca și import declarație și ne permite să includem imagini:

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

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

Singura diferență este prima linie în care am solicitat imaginea prin calea ei relativă și apoi am stocat-o într-o variabilă pe care am accesat-o în img etichetați prin bretele.

De asemenea, putem decide să facem acest lucru inline și să evităm linia suplimentară folosită pentru a atribui imaginea unei variabile, deoarece nu este obligatoriu:

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

Concluzie

Am învățat cum să importam imagini locale folosind import declarația și require() funcția în acest articol.