web-dev-qa-db-fra.com

Définition d'une image d'arrière-plan avec React Styles en ligne

J'essaie d'accéder à une image statique à utiliser dans une propriété inline backgroundImage dans React. Malheureusement, je ne sais pas comment faire.

En général, je pensais que vous veniez de faire comme suit:

import Background from '../images/background_image.png';

var sectionStyle = {
  width: "100%",
  height: "400px",
  backgroundImage: "url(" + { Background } + ")"
};

class Section extends Component {
  render() {
    return (
      <section style={ sectionStyle }>
      </section>
    );
  }
}

Cela fonctionne pour les balises <img>. Quelqu'un peut-il expliquer la différence entre les deux?

Exemple:

<img src={ Background } /> fonctionne très bien.

Je vous remercie!

javascriptreactjs
197
Kris

Les accolades à l'intérieur de la propriété backgroundImage sont incorrectes.

Vous utilisez probablement webpack avec le chargeur de fichiers image, donc Background devrait déjà être un String: backgroundImage: "url(" + Background + ")"

Vous pouvez également utiliser les modèles de chaîne ES6 ci-dessous pour obtenir le même effet:

backgroundImage: `url(${Background})`
339
rgommezz

Si vous utilisez ES5 -

backgroundImage: "url(" + Background + ")"

Si vous utilisez ES6 -

backgroundImage: `url(${Background})`

En principe, supprimer les accolades inutiles tout en ajoutant de la valeur aux travaux de la propriété backgroundImage fonctionnera.

23
Rushikesh Bharad

Style en ligne pour définir une image en plein écran:

style={{  
  backgroundImage: "url(" + "https://images.pexels.com/photos/34153/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350" + ")",
  backgroundPosition: 'center',
  backgroundSize: 'cover',
  backgroundRepeat: 'no-repeat'
}}
15
Hitesh Sahu

Vous pouvez également importer l'image dans le composant à l'aide de la fonction require().

<div style={{ backgroundImage: `url(require("images/img.svg"))` }}>

Notez les deux ensembles d'accolades. Le premier ensemble sert à entrer en mode de réaction et le second à indiquer un objet.

11
Tricky

Vous pouvez utiliser les modèles de lettres (inclus avec back-tick: `...`) à ​​la place pour la propriété backgroundImage comme ceci:

backgroundImage: `url(${Background})`
0
Fawaz Abdulla