Bevezetés
Amikor webes alkalmazásokat fejlesztünk a React segítségével, általában vizuális elemeket szeretnénk beépíteni a felhasználók érdeklődésének felkeltésére. Ezek a vizuális elemek bármilyen típusú kép lehetnek, beleértve a JPG-ket, PNG-ket, SVG-ket, GIF-eket és sok mást.
Ebben a cikkben megtudjuk, hogyan importálhat képeket a React segítségével, és meglátjuk, hogyan lehet ezt elérni.
A külső képek és a helyi képek az a két típusú kép, amelyet a React alkalmazásunkban szeretnénk használni. Ebben a cikkben elsősorban a helyi képekkel foglalkozunk, mivel a külső képekhez nem szükséges importálni őket.
A külső képek olyan képek, amelyeket már kívülről tároltak, és URL-en keresztül bárki hozzáférhet, míg a helyi képek olyan képek, amelyek csak a helyi számítógépünkön vagy projektmappánkon érhetők el, és amelyeket az alkalmazásunkban szeretnénk használni.
Külsőleg tárolt képek megjelenítése
Mielőtt rátérnénk a képek importálására, fontos megérteni, hogy a máshol tárolt képek ugyanúgy működnek, mint a HTML-ben mindig is használtuk – az URL-cím hozzáadásával a src attribútuma img címke:
const App = () => {
return (
<div>
<img src="https://reactjs.org/logo-og.png" alt="React Logo" />
</div>
);
};
Most tanuljuk meg, hogyan importálhatunk (helyi) képeket a React segítségével!
Képek importálása a React segítségével
A külső képeken kívül a Reactban a képek felhasználási módja jelentősen eltér a többi keretrendszertől vagy akár a HTML-től. Ezeket a képeket először importálni kell a Reactba, mielőtt felhasználnák őket az alkalmazásunkban.
Ez kétféleképpen valósítható meg: a import nyilatkozattal vagy a require() funkció. Mindkét megközelítést megvizsgáljuk.
Hogyan importálhat képeket a React segítségével a importál nyilatkozat
Mivel könnyebben olvasható és érthető, a import utasítás a leggyakrabban használt módszer a helyileg tárolt képek importálására a Reactban. A képeket úgy kezeljük alapértelmezett export, és amikor importáljuk őket, azt ugyanúgy tesszük, mint az összetevőket. Ez a fájl és az importált kép relatív elérési útjának megadásával történik:
import Logo from './images/react-logo.png';
const App = () => {
return (
<div>
<img src={Logo} alt="React Logo" />
</div>
);
};
A fenti kódban továbbra is a img címke és src attribútum, de ezúttal a src Az attribútum karakterlánc helyett változót kap, amelyet kapcsos zárójelekkel ad át a JSX-ben.
Jegyzet: Annyi képet importálhatunk, amennyit csak akarunk, de minden képnek egyedi névvel kell rendelkeznie az import utasításban, különben hibát fog kiütni.
Fontos megérteni, hogyan lehet megadni és megszerezni a fájlok relatív elérési útját; ellenkező esetben hibák és hibák léphetnek fel. Az előző példában a képet egy /src/images.
Képek importálása a React segítségével a request() függvény használatával
A require() A függvény egy Node.js függvény, amely az aktuális fájltól eltérő fájlokból származó külső modulok felvételére szolgál. Ugyanúgy működik, mint a import nyilatkozatot, és lehetővé teszi számunkra, hogy képeket is mellékeljünk:
let Logo = require('./images/react-logo.png');
const App = () => {
return (
<div>
<img src={Logo} alt="React Logo" />
</div>
);
};
Az egyetlen különbség az első sor, ahol szükségünk volt a képre a relatív útvonalán keresztül, majd tároltuk egy változóban, amelyet a img göndör kapcsos zárójelen keresztül.
Dönthetünk úgy is, hogy ezt soron belül tesszük, és elkerüljük a kép változóhoz való hozzárendeléséhez használt extra sort, mivel ez nem kötelező:
const App = () => {
return (
<div>
<img src={require('./images/react-logo.png')} alt="React Logo" />
</div>
);
};
Következtetés
Megtanultuk, hogyan importálhatunk helyi képeket a import nyilatkozat és a require() funkció ebben a cikkben.
