Piltide importimine Reactiga

Ajatempel: 22. juuni 2022 kell 4:30

Sissejuhatus

Reactiga veebirakendusi arendades tahame tavaliselt kasutajate huvi äratamiseks lisada visuaalseid elemente. Need visuaalsed elemendid võivad olla mis tahes tüüpi kujutised, sealhulgas JPG-d, PNG-d, SVG-d, GIF-id ja paljud teised.

Selles artiklis õpime, kuidas Reactiga pilte importida, ja vaatame erinevaid viise, kuidas seda saavutada.

Välised pildid ja kohalikud pildid on kahte tüüpi pildid, mida soovime oma Reacti rakenduses kasutada. Selles artiklis käsitleme peamiselt kohalikke pilte, kuna välised kujutised ei nõua meilt nende importimist.

Välised pildid on pildid, mida on juba väliselt hostitud ja millele igaüks pääseb juurde URL-i kaudu, samas kui kohalikud pildid on pildid, mis on meile saadaval ainult meie kohalikus arvutis või projektikaustas ja mida soovime oma rakenduses kasutada.

Kuidas kuvada väliselt hostitud pilte

Enne piltide importimise juurde asumist on oluline mõista, et mujal hostitud pildid töötavad samamoodi nagu oleme alati HTML-is pilte kasutanud – lisades URL-i src atribuut img silt:

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

Vaatame nüüd, kuidas saame Reactiga (kohalikke) pilte importida!

Kuidas importida pilte Reactiga

Peale väliste piltide erineb Reactis piltide kasutusviis oluliselt teiste raamistike või isegi HTML-i omast. Need pildid tuleb esmalt Reacti importida, enne kui neid saab meie rakenduses kasutada.

Seda saab teha kahel viisil: kasutades import avaldust või kasutades require() funktsiooni. Me käsitleme mõlemat lähenemisviisi.

Kuidas importida pilte rakendusega React, kasutades import väljavõte

Kuna seda on lihtsam lugeda ja mõista, import avaldus on kõige sagedamini kasutatav meetod Reactis kohapeal salvestatud piltide importimiseks. Pilte käsitletakse kui vaikeekspordid, ja kui me neid impordime, teeme seda samamoodi nagu komponente. Seda tehakse, määrates suhtelise tee failist imporditava pildini:

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

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

Ülaltoodud koodis kasutame endiselt img silt ja src atribuut, kuid seekord src atribuut saab pigem muutuja kui stringi, mis edastatakse JSX-is lokkis sulgudes.

Märge: Saame importida nii palju pilte, kui soovime, kuid igal pildil peab olema impordilauses kordumatu nimi, muidu kuvatakse tõrketeade.

Oluline on mõista, kuidas määrata ja hankida failide suhtelisi teid; vastasel juhul võivad esineda vead ja vead. Eelmises näites salvestati pilt an /src/images.

Kuidas importida pilte Reactiga, kasutades funktsiooni request()

. require() funktsioon on Node.js funktsioon, mida kasutatakse väliste moodulite kaasamiseks muudest failidest kui praegune fail. See toimib samamoodi nagu import avaldus ja võimaldab meil lisada pilte:

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

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

Ainus erinevus on esimene rida, kus vajasime pilti selle suhtelise tee kaudu ja seejärel salvestasime selle muutujasse, millele pääsesime juurde img sildi lokkis trakside kaudu.

Võime ka otsustada teha seda tekstisiseselt ja vältida lisarida, mida kasutatakse kujutise määramiseks muutujale, kuna see pole kohustuslik:

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

Järeldus

Õppisime, kuidas importida kohalikke pilte kasutades import avaldus ja require() funktsioon selles artiklis.

Ajatempel:

Veel alates Stackabus