background-image dans le composant réagir

Je suis en train de construire une page et je veux un élément de l'interface utilisateur d'avoir une image d'arrière-plan à l'aide de background-image propriété CSS. J'ai cherché sur google, bien sûr, et il y a des solutions, mais pour une raison que je ne peux pas voir l'image.

P. S. 1: même le changement que MUI élément régulier n'a pas aidé moi à tous.

P. S. 2: quand je suis en utilisant l'intérieur du conteneur sur lequel il montre, mais ce n'est pas ce que je veux.

UPDATE1: Essayé d'ajouter de la hauteur et de la largeur du conteneur, toujours pas de chance...

import React from 'react';

import Paper from 'material-ui/Paper';

import IconButton from 'material-ui/IconButton';
import ActionHome from 'material-ui/svg-icons/action/home';


const styles = {
    paperContainer: {
        backgroundImage: `url(${"static/src/img/main.jpg"})`
    }
};

export default class Home extends React.Component{
    render(){
        return(
            <Paper style={styles.paperContainer}>

            </Paper>
        )
    }
}
InformationsquelleAutor Roman | 2017-11-06
  1. 10

    Vous devez importer l'image à la suivante, en utilisant le chemin d'accès relatif.

    import React from 'react';

import Paper from 'material-ui/Paper';

import IconButton from 'material-ui/IconButton';
import ActionHome from 'material-ui/svg-icons/action/home';

import Image from '../img/main.jpg'; //Import using relative path


const styles = {
    paperContainer: {
        backgroundImage: `url(${Image})`
    }
};

export default class Home extends React.Component{
    render(){
        return(
            <Paper style={styles.paperContainer}>
                Some text to fill the Paper Component
            </Paper>
        )
    }
}
    • N'ont pas aidé malheureusement 🙁
    • Pour être en mesure d'importer et d'utiliser les images comme cela, vous devez utiliser github.com/webpack-contrib/file-loader @Romain, l'utilisez-vous?
    • oui j'ai cette dépendance rencontré. Bundle va sans erreur. ("fichier-loader": "^0.11.2")
    • Mmmmh, c'est bizarre, il fonctionne sur mon simple créez-réagir-app... Avez-vous essayé d'utiliser l'image dans un simple <img src={Image} /> pour voir si l'importation des œuvres ? Oh je pourrais avoir trouvé ! Avez-vous placer un peu de texte dans votre <Paper> juste pour vérifier si ma solution fonctionne ? Je viens de mettre à jour ma réponse
    • J'ai posté une réponse à cette question déjà, cependant, je l'ai juste essayé votre solution. Ne fonctionne pas pour moi 🙁
    InformationsquelleAutor Romain Le Qllc
  2. 2

    Comme Romainwn dit, vous devez importer l'image dans le fichier. Assurez-vous d'utiliser le chemin relatif de parent, de sorte qu'au lieu de

    static/src/img/main.jpg    #looks for static folder from current file location

    Ne 

    /static/src/img/main.jpg #looks for file from host directory:

    Un autre hack pour le faire serait l'ajout d'une ligne de style de la balise pour le composant:

    import React from 'react';

import Paper from 'material-ui/Paper';

import IconButton from 'material-ui/IconButton';
import ActionHome from 'material-ui/svg-icons/action/home';

import Image from '../img/main.jpg'; //Import using relative path


export default class Home extends React.Component{
    render(){
        return(
            <Paper style="background:path/to/your/image;">

            </Paper>
        )
    }
}
    InformationsquelleAutor Eugene R. Wang
  3. 1

    J'ai trouvé une solution pour mon cas. En fait le réglage de la hauteur du conteneur en pixels ont aidé.

    Voici le code:

    import React from 'react';


const styles = {
    paperContainer: {
        height: 1356,
        backgroundImage: `url(${"static/src/img/main.jpg"})`
    }
};

export default class Home extends React.Component {
    render() {
        return (
            <div style={styles.paperContainer}>
            </div>
        )
    }
}
    InformationsquelleAutor Roman
  4. 1

    Eu les mêmes problèmes, tout en travaillant avec le Matériel de l'INTERFACE utilisateur de Réagir et de le Créer Réagir App. Voici la solution qui a fonctionné pour moi. Note que j'ai mis en place un webpack alias pour le chemin d'accès relatif

    import BackgroundHeader from "assets/img/BlueDiamondBg.png"

const BackgroundHead = {
  backgroundImage: 'url('+ BackgroundHeader+')'
  }

<div style={BackgroundHead}>
    InformationsquelleAutor Meir Snyder
  5. 0

    J'ai eu ce travail pour le matériel-de l'interface utilisateur, où le rembourrage sur mon élément parent a été 24px j'ai donc ajouté de 48 px à la largeur de l'image d'arrière-plan pour le faire fonctionner...

    const styles = {
   heroContainer: {
     height: 800,
     backgroundImage: `url(${"../static/DSC_1037.jpg"})`,
     backgroundSize: 'cover',
     backgroundPosition: 'center',
     width: `calc(100vw + 48px)`,
     margin: -24,
     padding: 24,
   }
  };
<Grid
    container
    direction="column"
    justify="flex-end"
    alignItems="right"
    style={styles.heroContainer} >
    <Grid item>Goes here</Grid>
</Grid>
    InformationsquelleAutor Meli