Définition d'une image d'arrière-plan avec les styles en ligne React : Comprendre la différence entre les images en ligne et les images d'arrière-plan en ligne

Lorsque vous travaillez avec React, définissez un Hintergrundsbild utilisant des styles en ligne peut sembler simple, mais il existe des différences clés entre l'utilisation d'une balise en ligne et la définition d'une image d'arrière-plan à l'aide de backgroundImage. property.

Comprendre les images en ligne

L'utilisation d'une balise en ligne est un moyen simple et direct d'afficher une image. En définissant l'attribut src sur le chemin de l'image, il charge et affiche l'image directement.

Paramètre Images d'arrière-plan avec des styles en ligne

La définition d'une image d'arrière-plan à l'aide de styles en ligne implique l'utilisation de la propriété backgroundImage et la fourniture de l'URL de l'image comme valeur. La principale différence ici est que la propriété backgroundImage attend une chaîne contenant l'URL, pas une variable ou une expression JavaScript.

Syntaxe correcte :

const sectionStyle = {
  backgroundImage: `url(${Background})`,
};

Dans cet exemple, la variable Background est déjà une chaîne contenant le chemin d'accès à l'image, grâce à des outils comme webpack et son chargeur de fichier image.

Syntaxe incorrecte :

const sectionStyle = {
  backgroundImage: "url("   { Background }   ")", // Incorrect
};

La syntaxe incorrecte utilise des accolades autour de {Arrière-plan}, ce qui n'est pas nécessaire et peut entraîner des erreurs.

Utilisation de modèles de chaînes ES6

Une alternative à l'utilisation de la concaténation de chaînes consiste à utiliser des modèles de chaînes ES6. Cela permet une syntaxe plus propre et plus concise :

const sectionStyle = {
  backgroundImage: `url(${Background})`,
};

En comprenant ces différences, vous pouvez définir efficacement des images d'arrière-plan à l'aide de styles en ligne dans React, garantissant ainsi que votre application affiche correctement les images.