Uvažanje slik z React

Predstavitev

Ko razvijamo spletne aplikacije z Reactom, običajno želimo vključiti vizualne elemente, da pritegnemo zanimanje uporabnikov. Ti vizualni elementi so lahko katera koli vrsta slike, vključno s slikami JPG, PNG, SVG, GIF in mnogimi drugimi.

V tem članku se bomo naučili uvoziti slike z Reactom in videli različne načine, kako bi to lahko dosegli.

Zunanje slike in lokalne slike sta dve vrsti slik, ki ju želimo uporabiti v naši aplikaciji React. V tem članku se ukvarjamo predvsem z lokalnimi slikami, ker zunanjih slik ne zahtevamo, da jih uvozimo.

Zunanje slike so slike, ki so že bile gostovane zunaj in do njih lahko dostopa kdorkoli preko URL-ja, medtem ko so lokalne slike slike, ki so nam na voljo samo v našem lokalnem računalniku ali projektni mapi in jih želimo uporabiti v naši aplikaciji.

Kako prikazati slike, ki gostujejo zunaj

Preden se lotimo uvoza slik, je pomembno razumeti, da slike, ki gostujejo drugje, delujejo na enak način, kot smo vedno uporabljali slike v HTML – z dodajanjem URL-ja v src atribut img oznaka:

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

Naučimo se zdaj, kako lahko uvozimo (lokalne) slike z React!

Kako uvoziti slike z React

Poleg zunanjih slik se način uporabe slik v Reactu bistveno razlikuje od drugih ogrodij ali celo HTML-ja. Te slike je treba najprej uvoziti v React, preden jih lahko uporabimo v naši aplikaciji.

To je mogoče doseči na dva načina: z uporabo import izjavo ali z uporabo require() funkcijo. Preučili bomo oba pristopa.

Kako uvoziti slike z React z uporabo uvoz Izjava

Ker je lažje brati in razumeti, import izjava je najpogosteje uporabljena metoda za uvoz lokalno shranjenih slik v React. Slike se obravnavajo kot privzeti izvozi, in ko jih uvozimo, to storimo na enak način kot uvozimo komponente. To naredimo tako, da določimo relativno pot od datoteke do slike, ki jo uvažamo:

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

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

V zgornji kodi še vedno uporabljamo img oznako in src atribut, tokrat pa je src prejme spremenljivko namesto niza, ki se posreduje z uporabo zavitih oklepajev v JSX.

Opomba: Uvozimo lahko poljubno število slik, vendar mora imeti vsaka slika edinstveno ime v uvoznem stavku, sicer bo prišlo do napake.

Pomembno je razumeti, kako določiti in pridobiti relativne poti za datoteke; v nasprotnem primeru se lahko pojavijo hrošči in napake. V prejšnjem primeru je bila slika shranjena v /src/images.

Kako uvoziti slike z Reactom s funkcijo require().

O require() je funkcija Node.js, ki se uporablja za vključitev zunanjih modulov iz datotek, ki niso trenutna datoteka. Deluje na enak način kot import izjavo in nam omogoča vključitev slik:

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

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

Edina razlika je prva vrstica, kjer smo zahtevali sliko prek njene relativne poti in jo nato shranili v spremenljivko, do katere smo dostopali v img oznako prek zavitih oklepajev.

Lahko se tudi odločimo, da bomo to naredili v vrstici in se izognili dodatni vrstici, ki se uporablja za dodelitev slike spremenljivki, saj ni obvezna:

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

zaključek

Naučili smo se uvoziti lokalne slike z uporabo import izjava in require() funkcijo v tem članku.