Comment référencer correctement les images statiques pour le style BackgroundImage dans React ?

Accès aux images statiques pour BackgroundImage dans React

Les développeurs peuvent rencontrer des difficultés pour accéder aux images statiques pour le style backgroundImage en ligne dans les applications React. L'approche syntaxique courante suivante tente de référencer une image importée :

<code class="javascript">import Background from '../images/background_image.png';

const sectionStyle = {
  width: "100%",
  height: "400px",
  backgroundImage: "url(" + { Background } + ")"
};</code>

Bien que cette approche fonctionne parfaitement pour balises, il échoue lorsqu’il est appliqué au style backgroundImage. La principale disparité réside dans l'utilisation incorrecte des accolades dans la propriété backgroundImage.

Pour résoudre ce problème, la syntaxe correcte doit omettre les accolades et garantir que Background est une chaîne prétraitée (probablement facilitée par des tiers). outils de fête comme le webpack et le chargeur de fichiers image).

<code class="javascript">backgroundImage: "url(" + Background + ")"</code>

Alternativement, les développeurs peuvent exploiter les modèles de chaînes ES6 pour obtenir le même résultat :

<code class="javascript">backgroundImage: `url(${Background})`</code>

En implémentant ces modifications, les développeurs peuvent réussir référencez des images statiques pour le style backgroundImage dans leurs applications React.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!