Définir un backgroundImage avec les styles en ligne de React

Question

J'essaie d'accéder à une image statique pour l'utiliser dans le cadre d'un programme en ligne. backgroundImage dans React. Malheureusement, je n'ai pas trouvé comment le faire.

En général, je pensais que vous faisiez simplement ce qui 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 <img> tags. Quelqu'un peut-il expliquer la différence entre les deux ?

Exemple :

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

Merci !

Answer 1

Les accolades dans la propriété backgroundImage sont incorrectes.

Vous utilisez probablement webpack avec un chargeur de fichiers d'image, donc Background devrait déjà être une chaîne : backgroundImage: "url(" + Background + ")"

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

backgroundImage: `url(${Background})`

Answer 2

Style en ligne pour mettre n'importe quelle 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'
}}

Answer 3

Si vous utilisez ES5 -

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

Si vous utilisez ES6 -

backgroundImage: `url(${Background})`

En fait, la suppression des accolades inutiles et l'ajout d'une valeur à la propriété backgroundImage fonctionnent.

Answer 4

Vous pouvez également intégrer l'image dans le composant en utilisant la fonction require() fonction.

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

Notez les deux ensembles de crochets arrondis. . Le premier ensemble sert à entrer dans le mode de réaction et le second sert à désigner l'objet.

Answer 5

Vous pouvez utiliser des littéraux de modèle (entourés d'un back-tick : `...`) à la place. Pour backgroundImage propriété comme ceci :

backgroundImage: `url(${Background})`