Utilisation des styles en ligne React pour définir l'image d'arrière-plan

1. Utilisation de styles en ligne pour définir l’image d’arrière-plan dans React
2. Utilisation de styles en ligne pour définir l’image locale comme arrière-plan dans React

Lors de la création d’applications Web complexes, les développeurs doivent souvent définir une image d’arrière-plan personnalisée. L’approche standard consiste à utiliser CSS et HTML.

Lors du développement d’applications React, vous disposez de nombreuses options pour définir une image d’arrière-plan. Vous pouvez utiliser des fichiers CSS normaux ou utiliser des solutions CSS-in-JS comme des styles en ligne dans React.

Utilisation de styles en ligne pour définir l’image d’arrière-plan dans React

Les styles en ligne vous permettent de configurer les styles des composants HTML ou React dans les fichiers JavaScript. Voici un exemple de définition d’une image d’arrière-plan dans le composant de classe React :

class App extends Component {
  render() {
    const containerStyle = {
      backgroundImage:
        "url(https://cdn.pixabay.com/photo/2021/09/02/16/48/cat-6593947_960_720.jpg)",
      width: "600px",
      height: "600px",
    };
    return <div style={containerStyle}><h1 style={{color: "black"}}>Hi! Try edit me</h1></div>;
  }
}

HTML contre JSX

Comme HTML, dans JSX, nous utilisons l’attribut style du conteneur pour définir les styles en ligne. Cependant, contrairement au HTML, nous ne pouvons pas définir sa valeur sur un simple texte. Au lieu de cela, nous utilisons des accolades pour passer une variable JavaScript, containerStyle. Cette variable est essentiellement un objet qui contient des paires clé-valeur de propriétés CSS et leurs valeurs correspondantes.

Une différence importante est que les touches d’un objet style ne doivent pas contenir d’espaces ou d’autres symboles non alphanumériques. En CSS ordinaire, la propriété serait définie comme background-image, mais elle devient la propriété backgroundImage d’un objet style en JavaScript.

Un autre avantage de l’utilisation des solutions CSS-in-JS est que vos définitions de style peuvent inclure des références variables. Ceci est réalisé grâce à l’utilisation de littéraux de modèle. Voici un exemple :

class App extends Component {
  render() {
    const backgroundImageURL =
      "https://cdn.pixabay.com/photo/2021/09/02/16/48/cat-6593947_960_720.jpg";
    const containerStyle = {
      backgroundImage:
        `url(${backgroundImageURL})`,
      width: "600px",
      height: "600px",
    };
    return <div style={containerStyle}><h1 style={{color: "black"}}>Hi! Try edit me</h1></div>;
  }
}

Dans ce cas, les styles refléteront les modifications apportées à la variable.

Utilisation de styles en ligne pour définir l’image locale comme arrière-plan dans React

Si vous souhaitez utiliser une image du dossier assets local, vous pouvez utiliser une instruction import ou une méthode require() pour la charger. Cependant, le chargement d’images ne fonctionnera que si votre environnement de développement inclut webpack.

Quelle que soit la manière dont vous choisissez de charger votre image dans l’application, vous devrez spécifier le chemin relatif :

import image from "./assets/filename.jpg"

Ce chemin relatif suppose que le dossier du composant et de l’asset se trouvent dans le dossier src.

Une fois que vous avez importé une image, vous pouvez la référencer par le nom de l’importation (dans ce cas, image) tout comme vous référenceriez une variable. Chaque image que vous utilisez dans votre application doit être importée séparément, mais votre image d’arrière-plan ne devra être importée qu’une seule fois.

Vous pouvez également créer une variable distincte et l’utiliser pour stocker la valeur de l’image chargée avec la méthode require() :

const image = require("./assets/filename.jpg")

Charger des images et leur donner un nom de variable est plus lisible et vous donne la liberté d’apporter des modifications si nécessaire.