esittely
Kun kehitämme verkkosovelluksia Reactin avulla, haluamme yleensä sisällyttää visuaalisia elementtejä käyttäjien kiinnostuksen herättämiseen. Nämä visuaaliset elementit voivat olla minkä tahansa tyyppisiä kuvia, mukaan lukien JPG:t, PNG:t, SVG:t, GIF:t ja monet muut.
Tässä artikkelissa opimme tuomaan kuvia Reactin avulla ja katsomme, kuinka tämä voidaan saavuttaa.
Ulkoiset kuvat ja paikalliset kuvat ovat kaksityyppisiä kuvia, joita haluamme käyttää React-sovelluksessamme. Tässä artikkelissa käsittelemme ensisijaisesti paikallisia kuvia, koska ulkoiset kuvat eivät edellytä meidän tuovan niitä.
Ulkoiset kuvat ovat kuvia, joita on jo isännöity ulkoisesti ja joihin kuka tahansa pääsee käsiksi URL-osoitteen kautta, kun taas paikalliset kuvat ovat kuvia, jotka ovat saatavilla vain paikallisella tietokoneellamme tai projektikansiossamme ja joita haluamme käyttää sovelluksessamme.
Ulkoisesti isännöityjen kuvien näyttäminen
Ennen kuin käsittelemme kuvien tuontia, on tärkeää ymmärtää, että muualla isännöidyt kuvat toimivat samalla tavalla kuin olemme aina käyttäneet kuvia HTML:ssä – lisäämällä URL-osoite src - ominaisuus img tunnisteet:
const App = () => {
return (
<div>
<img src="https://reactjs.org/logo-og.png" alt="React Logo" />
</div>
);
};
Opitaan nyt kuinka voimme tuoda (paikallisia) kuvia Reactin avulla!
Kuvien tuominen Reactilla
Ulkoisten kuvien lisäksi kuvien käyttötapa Reactissa eroaa merkittävästi muiden kehysten tai jopa HTML:n käyttämisestä. Nämä kuvat on ensin tuotava Reactiin, ennen kuin niitä voidaan käyttää sovelluksessamme.
Tämä voidaan suorittaa kahdella tavalla: käyttämällä import lausuntoa tai käyttämällä require() toiminto. Käymme läpi molemmat lähestymistavat.
Kuinka tuoda kuvia Reactilla käyttämällä tuoda Lausunto
Koska se on helpompi lukea ja ymmärtää, import lauseke on yleisimmin käytetty tapa tuoda paikallisesti tallennettuja kuvia Reactissa. Kuvia käsitellään mm oletusvientit, ja kun tuomme niitä, teemme sen samalla tavalla kuin tuomme komponentteja. Tämä tehdään määrittämällä suhteellinen polku tiedostosta tuotavaan kuvaan:
import Logo from './images/react-logo.png';
const App = () => {
return (
<div>
<img src={Logo} alt="React Logo" />
</div>
);
};
Yllä olevassa koodissa käytämme edelleen img tag ja src attribuutti, mutta tällä kertaa src attribuutti vastaanottaa muuttujan merkkijonon sijaan, joka välitetään käyttämällä aaltosulkuja JSX:ssä.
Huomautus: Voimme tuoda niin monta kuvaa kuin haluamme, mutta jokaisella kuvalla on oltava yksilöllinen nimi tuontikäskyssä, muuten se antaa virheen.
On tärkeää ymmärtää, kuinka tiedostojen suhteelliset polut määritetään ja hankitaan; muuten voi ilmetä virheitä ja virheitä. Edellisessä esimerkissä kuva on tallennettu /src/images.
Kuvien tuominen Reactilla käyttämällä request()-funktiota
- require() -funktio on Node.js-funktio, jota käytetään sisällyttämään ulkoisia moduuleja muista tiedostoista kuin nykyisestä tiedostosta. Se toimii samalla tavalla kuin import lausunto ja antaa meille mahdollisuuden sisällyttää kuvia:
let Logo = require('./images/react-logo.png');
const App = () => {
return (
<div>
<img src={Logo} alt="React Logo" />
</div>
);
};
Ainoa ero on ensimmäinen rivi, jossa vaadimme kuvaa sen suhteellisen polun kautta ja tallensimme sen sitten muuttujaan, jota käytimme img -tagia kiharaisten aaltosulkeiden kautta.
Voimme myös päättää tehdä tämän rivin sisällä ja välttää ylimääräistä riviä, jolla kuva määritetään muuttujaan, koska se ei ole pakollista:
const App = () => {
return (
<div>
<img src={require('./images/react-logo.png')} alt="React Logo" />
</div>
);
};
Yhteenveto
Opimme tuomaan paikallisia kuvia käyttämällä import lausunto ja require() toiminto tässä artikkelissa.
