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
la 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
la 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
la 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
la 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é
la 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
la source

3

essaye ça:

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

Hamza Khan
la 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
la source

-1

Vous pouvez essayer usimg

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

Jamilur Rahman
la 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

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

Réponses: