Introduzione
Quando sviluppiamo applicazioni web con React, in genere vogliamo includere elementi visivi per catturare l'interesse degli utenti. Questi elementi visivi potrebbero essere qualsiasi tipo di immagine, inclusi JPG, PNG, SVG, GIF e molti altri.
In questo articolo impareremo come importare immagini con React e vedremo i vari modi in cui ciò potrebbe essere ottenuto.
Le immagini esterne e le immagini locali sono i due tipi di immagini che vogliamo utilizzare nella nostra applicazione React. In questo articolo ci occupiamo principalmente di immagini locali perché le immagini esterne non richiedono l'importazione.
Le immagini esterne sono immagini che sono già state ospitate esternamente e possono essere raggiunte da chiunque tramite un URL, mentre le immagini locali sono immagini che sono disponibili solo per noi sul nostro computer locale o nella cartella del progetto e che vogliamo utilizzare nella nostra applicazione.
Come visualizzare le immagini ospitate esternamente
Prima di iniziare a importare le immagini, è importante capire che le immagini ospitate altrove funzionano allo stesso modo in cui abbiamo sempre utilizzato le immagini in HTML, aggiungendo l'URL al src attributo di img etichetta:
const App = () => {
return (
<div>
<img src="https://reactjs.org/logo-og.png" alt="React Logo" />
</div>
);
};
Impariamo ora come importare immagini (locali) con React!
Come importare immagini con React
A parte le immagini esterne, il modo in cui le immagini vengono utilizzate in React differisce in modo significativo da quello di altri framework o persino dall'HTML. Queste immagini devono prima essere importate in React prima di poter essere utilizzate nella nostra applicazione.
Questo può essere ottenuto in due modi: utilizzando il import dichiarazione o utilizzando il require() funzione. Esamineremo entrambi gli approcci.
Come importare immagini con React usando il file importare dichiarazione
Perché è più facile da leggere e capire, il import istruzione è il metodo più comunemente usato per importare le immagini archiviate localmente in React. Le immagini sono trattate come esportazioni predefinitee quando li importiamo, lo facciamo nello stesso modo in cui importiamo i componenti. Questo viene fatto specificando il percorso relativo dal file all'immagine che stiamo importando:
import Logo from './images/react-logo.png';
const App = () => {
return (
<div>
<img src={Logo} alt="React Logo" />
</div>
);
};
Nel codice sopra, utilizziamo ancora il img taggare e src attributo, ma questa volta il src attributo riceve una variabile anziché una stringa, che viene passata utilizzando parentesi graffe in JSX.
Nota: Possiamo importare tutte le immagini che desideriamo, ma ogni immagine deve avere un nome univoco nell'istruzione di importazione, altrimenti genererà un errore.
È importante capire come specificare e ottenere percorsi relativi per i file; in caso contrario, potrebbero verificarsi bug ed errori. Nell'esempio precedente, l'immagine è stata salvata in un file /src/images.
Come importare immagini con React usando la funzione require()
I require() function è una funzione Node.js utilizzata per includere moduli esterni da file diversi dal file corrente. Funziona allo stesso modo del import dichiarazione e ci consente di includere immagini:
let Logo = require('./images/react-logo.png');
const App = () => {
return (
<div>
<img src={Logo} alt="React Logo" />
</div>
);
};
L'unica differenza è la prima riga in cui abbiamo richiesto l'immagine tramite il suo percorso relativo e quindi l'abbiamo archiviata in una variabile a cui abbiamo avuto accesso nel img tag tramite parentesi graffe.
Possiamo anche decidere di farlo in linea ed evitare la linea extra usata per assegnare l'immagine ad una variabile, in quanto non obbligatoria:
const App = () => {
return (
<div>
<img src={require('./images/react-logo.png')} alt="React Logo" />
</div>
);
};
Conclusione
Abbiamo imparato come importare immagini locali usando il file import dichiarazione e il require() funzione in questo articolo.
