web-dev-qa-db-fra.com

Comment définir une image d'arrière-plan dans reactjs?

J'ai une application reactjs/webpack et j'essaie de définir une image de fond pour le bodytag:

body{
    background: url("../images/some-background.jpg");
    background-size:contain;
    background-position:top;
    background: cover;
}

Cependant, après le chargement des composants, le style de corps n'est pas présent dans la page, mais il apparaît dans la console. Existe-t-il un moyen d'afficher une image d'arrière-plan dans la page principale tout en ayant la règle CSS dans le fichier CSS chargé par webpack? Est-ce parce que reactjs fait quelque chose que je ne connais pas?

cssreactjswebpack
7
bier hier

Vous devez mettre vos images dans le dossier Public de votre projet. Vous pouvez ensuite y accéder en tapant, par exemple:

<img src="/background.jpg" />

Il en va de même pour CSS

.background { background-image: url("/background.jpg"); }

4
Richard Bonneau

Ici est un simple dépôt github, que j'ai créé pour mettre l'image d'arrière-plan dans la balise body. Cet exemple n'a aucun changement/plugin ajouté dans la configuration du webpack spécifiquement pour css.

Dans votre code, si vous avez une structure de référentiel similaire à la mienne, cela pourrait être un problème de chemin. J'espère que cela résout votre question.

2
Upasana

Le fond doit déjà être une chaîne:

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

Vous pouvez également utiliser des modèles de chaîne ES6:

backgroundImage: `url(${Background})`

vous devriez lire ceci, cela pourrait aider -

https://www.davidmeents.com/blog/how-to-set-up-webpack-image-loader/

1
Stacy Chen

J'ai toujours eu des problèmes pour que webpack charge correctement les images d'arrière-plan. Peut-être que c'est corrigé dans le webpack 2, mais je ne l'utilise pas encore. Je suis retombé dans l'utilisation du copy-webpack-plugin pour copier des images dans un répertoire, puis référencer cet emplacement dans CSS.

new CopyWebpackPlugin([
        { from: './src/images', to: 'images' }
])
0
genestd

CSS:

.Logo {   background-image: url(./logo.png); }

Réagissez:

import React from 'react';
import logo from './logo.png';  // Tell Webpack this JS file uses this image
console.log(logo); // /logo.84287d09.png

function Header() {   // Import result is the URL of your image  
  return <img src={logo} alt="Logo" />;
}

export default Header;
0
enso

C'est parce que vous utilisez webpack, vous pouvez écrire votre feuille de style dans un css or scss files. cela signifie que vous allez l'importer dans votre app.js. donc webpack utilisera sass-loader or css-loader pour regrouper vos fichiers css lorsque vous êtes dans un environnement de développement.

Donc cela ne fonctionnera pas immédiatement, le navigateur chargera d'abord votre bundle.js, exécutera le fichier js, générera la feuille de style et les insérera dans l'en-tête.

Si vous voulez travailler immédiatement, vous devez écrire votre feuille de style dans votre fichier html.

Et n'oubliez pas que le chargement de votre image d'arrière-plan prend également un certain temps.

0
chenkehxx