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

290

J'essaie d'accéder à une image statique à utiliser dans une backgroundImagepropriété en ligne dans React. Malheureusement, je me suis épuisé sur la façon de procéder.

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

Exemple:

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

Je vous remercie!

javascript reactjs

— Kris
source

476

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 une chaîne: backgroundImage: "url(" + Background + ")"

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

backgroundImage: `url(${Background})`

— rgommezz
source

J'aurais dû ajouter cela à ma question. J'ai une largeur et une hauteur définies (100% / 400px respectivement). Le problème qui se pose est dû à la façon dont React gère les images statiques, je crois.

— Kris

Devrait-on échapper aux caractères '(",') 'et espaces blancs dans la variable Background avant la concaténation selon w3.org/TR/CSS2/syndata.html#value-def-uri ?

— qbolec

50

La syntaxe complète devrait ressembler à ceci:style={{backgroundImage: "url(" + Background + ")"}}

— mike

2

juste pour développer le commentaire de @ mike, vous avez besoin de doubles accolades car l'un est pour que React entre en mode JS et l'autre pour désigner le nouvel objet.

— Ciprian Tomoiagă

J'obtiens l'erreur 'Section' est définie mais jamais utilisée 'après avoir donné cet arrière-plan d'importation à partir de' ./background.jpg '; var sectionStyle = {width: "100%", height: "400px", backgroundImage: url(${Background})}; classe Section étend Component {render () {return (<section style = {sectionStyle}> </section>); }}

— Pavanan MS

41

Si vous utilisez ES5 -

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

Si vous utilisez ES6 -

backgroundImage: `url(${Background})`

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

— Rushikesh Bharad
source

2

Pour moi dans ES6, c'était le cas backgroundImage: `url("${Background}")`, car votre exemple ES6 ne fonctionnait pas pour moi.

— S ..

Bonjour Bharad, comment feriez-vous si vous souhaitez ajouter plusieurs images d'arrière-plan. Dites pour deux images comment feriez-vous cela? Merci

— En route vers le succès

37

Style en ligne pour définir 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'
}}

— Hitesh Sahu
source

17

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

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

— Rusé
source

Que faire si le chemin de l'image est une URL Web au lieu d'un chemin local? Quelque chose commehttps://images.com/myimage.png

— Aminu Kano

3

Ok je comprends, lors de l'utilisation d'une URL basée sur le Web. Je devrais juste écrireurl(https://images.com/myimage.png)

— Aminu Kano

4

Vous pouvez utiliser des modèles de littéraux (inclus avec back-tick: `...`) à la place pour une backgroundImagepropriété comme celle-ci:

backgroundImage: `url(${Background})`

— Fawaz Abdulla
source

3

essaye ça:

style={{ backgroundImage: `url(require("path/image.ext"))` }}

— Hamza Khan
source

2

Pour moi, ce qui a fonctionné, c'est de l'avoir comme ça

style={{ backgroundImage: `url(${require("./resources/img/banners/3.jpg")})` }}

— brianokinyi
source

-1

Vous pouvez essayer usimg

backgroundImage: url(process.env.PUBLIC_URL + "/      assets/image_location")

— Jamilur Rahman
source

Ce n'est pas recommandé car cela empêchera le webpack de connaître l'actif. Cela se terminera par un échec de cache si l'application React est ouverte hors ligne.

— Thomas Kekeisen