Come impostare un'immagine di sfondo in React usando il CSS in linea

Articolo originale: https://www.freecodecamp.org/news/react-background-image-tutorial-how-to-set-backgroundimage-with-inline-css-style/

Ci sono quattro modi per impostare una proprietà di stile backgroundImage usando il CSS in linea in React.

Questo tutorial ti mostrerà i quattro metodi, con del codice di esempio per ognuno.

Come impostare un'immagine di sfondo in React usando un URL esterno

Se la tua immagine si trova da qualche parte online, puoi impostare l'immagine di sfondo del tuo elemento mettendo l'URL in questo modo:

function App() {
  return (
    <div style={{ 
      backgroundImage: `url("https://via.placeholder.com/500")` 
    }}>
      Hello World
    </div>
  );
}

Il codice sopra renderizzerà un singolo elemento div con lo style background-image: url(https://via.placeholder.com/500) applicato ad esso.

Come impostare un'immagine di sfondo in React dalla tua cartella /src

Se crei l'applicazione usando Create React App e hai le tue immagini nella cartella src/, puoi prima importare l'immagine e poi piazzarla come sfondo del tuo elemento:

import React from "react";
import background from "./img/placeholder.png";

function App() {
  return (
    <div style={{ backgroundImage: `url(${background})` }}>
      Hello World
    </div>
  );
}

export default App;

Quando esegui il comando npm start, React mostrerà un errore "Failed to Compile" e fermerà il build quando l'immagine non viene trovata:

In questo modo non mostrerai link di immagini mancanti nella tua app web. Nel codice qui sopra, il valore di backgroundImage è impostato usando una stringa template, che permette di incorporare un'espressione JavaScript.

Come impostare un'immagine di sfondo in React usando il metodo dell'URL relativo

La cartella public/ in Create React App può essere usata per aggiungere risorse statiche nella tua applicazione React. Qualsiasi file metti in questa cartella sarà accessibile online.

Puoi quindi assegnare l'URL relativo al tuo indirizzo di host per impostare l'immagine di sfondo. Ecco un esempio:

<div style={{ backgroundImage: "url(/image.png)" }}>
  Hello World
</div>

Impostando il path dell'URL a /image.png come nell'esempio qui sopra, il browser cercherà l'immagine di sfondo in <your host address>/image.png.

Puoi anche creare un'altra cartella dentro public/ se vuoi organizzare le tue immagini in cartelle. Per esempio:

Non dimenticarti di aggiustare il valore di backgroundImage in url(/img/image.png) se decidi di creare la cartella.

Impostare un'immagine di sfondo in react usando il metodo dell'URL assoluto

Puoi anche includere l'URL assoluto usando la variabile di ambiente di Create React App PUBLIC_URL in questo modo:

<div style={{ 
  backgroundImage: `url(${process.env.PUBLIC_URL + '/image.png'})` 
}}>
  Hello World
</div>

Quando esegui questo sul tuo computer, gli script di React gestiscono il valore di PUBLIC_URL. Quando lo esegui in locale, apparirà come un URL relativo invece di un URL assoluto:

L'URL assoluto sarà visto solo una volta fatto il deployment di React in una applicazione di produzione.

Come impostare un'immagine di sfondo con proprietà aggiuntive

Se vuoi personalizzare ulteriormente l'immagine di sfondo, lo puoi fare aggiungendo proprietà addizionali dopo backgroundImage. Ecco un esempio:

<div style={{ 
  backgroundImage: `url(${process.env.PUBLIC_URL + '/image.png'})`,
  backgroundRepeat: 'no-repeat',
  width:'250px' 
}}>
  Hello World
</div>

Le proprietà impostate aggiungeranno background-repeat: no-repeat e width: 250px assieme allo stile background-image all'elemento div.

Grazie per aver letto, spero che quest'articolo ti sia stato utile. 🙂