CONTATTACI

Guide per aspiranti programmatori

Programmatore che esamina react al microscopio
Lezione 8 / 41

Import di immagini in React

Come dicevamo nella sezione precedente, tra i file che possiamo importare in React ci sono anche le immagini. Un esempio è proprio nell’applicazione che Create React App prevede all’installazione:

 

import logo from "./logo.svg";

export default function App() {
  return <img src={logo} alt="React" />;
}

Le immagini e gli SVG vengono importati con un formato particolare, che è una variante di Base64, che può essere dato in pasto all’attributo src di un tag img (come nell’esempio soprastante).

 

La cartella public

Un metodo alternativo per importare file è quello della cartella public: tutto ciò che è nella cartella public è allo stesso livello di index.html, di conseguenza può essere usato come se fosse nella cartella radice del progetto. Per esempio, un file in public/images/my-image.jpg potrebbe essere usato in questo modo:

 

export default function MyComponent() {
  return <img src="./images/my-image.jpg" alt="My image" />;
}

Durante lo sviluppo, il server di Create React App e Vite modificano i percorsi dei file per far sì che public diventi l’effettiva radice del progetto, per cui possiamo (e dobbiamo!) omettere public/ quando scriviamo i percorsi. Quando il progetto viene ottimizzato per la produzione, il contenuto di public viene effettivamente copiato nella radice del progetto, per cui i percorsi rimangono validi.

 

Quando usare import e quando usare public?

L’importazione di immagini tramite import e quella tramite la cartella public permettono di ottenere lo stesso risultato, ma ci sono un paio di cose da prendere in considerazione:

 

  • Le immagini importate tramite import vengono ottimizzate da React e inserite direttamente nel codice JavaScript. Questo significa che, tipicamente, vengono caricate più velocemente.
  • Di contro, le immagini importate tramite import non sono raggiungibili al di fuori dell’applicazione. Questo significa che non sono indicizzabili dai motori di ricerca, è più difficile condividere le immagini “da sole” (per esempio inviando un link all’immagine tramite social network) o usarle come copertine per i social o anteprime per le applicazioni di messaggistica.

 

Per decidere quale delle due tecniche usare, quindi, possiamo chiederci: quanto è importante l’immagine al di là del contesto dell’applicazione?

Se si tratta di icone, per esempio, è molto probabile che abbia più senso importarle direttamente con import.

Quando si parla di copertine di pagine, invece, è più probabile che sia conveniente inserirle nella cartella public, così che possano essere indicizzate e condivise con altre piattaforme.

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 115 €/mese.

Esempio di finanziamento 

Importo finanziato: € 2440 in 24 rate da € 115 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 2841.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

*In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 210 €/mese.

Esempio di finanziamento  

Importo finanziato: € 4500 in 24 rate da € 210,03 – TAN fisso 9,68% TAEG 11,97% – importo totale del credito € 5146,55.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.