web-dev-qa-db-fra.com

image de fond dans le composant de réaction

Je construis une page et je veux qu'un élément material-ui ait une image d'arrière-plan utilisant la propriété CSS background-image. Je l'ai cherché sur Google, bien sûr, et il existe des solutions, mais pour une raison quelconque, je ne peux pas voir cette image.

P.S.1: même changer cet élément MUI en normal ne m'a pas aidé du tout.

P.S.2: quand j'utilise un conteneur à l'intérieur, cela se voit, mais ce n'est pas ce que je veux.

UPDATE1: J'ai essayé d'ajouter de la hauteur et de la largeur au 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>
        )
    }
}
javascripthtmlcssreactjsmaterial-ui
3
Roman

J'ai trouvé un correctif pour mon cas. En fait, définir la hauteur du conteneur en pixels a 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>
        )
    }
}
1
Roman

Vous devez importer l'image comme suit, en utilisant le chemin 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>
        )
    }
}
8
Romain Le Qllc

Comme Romainwn l'a dit, vous devez importer l'image dans le fichier. Assurez-vous que vous utilisez le chemin relatif au parent, donc au lieu de

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

Faire 

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

Un autre hack à faire serait d'ajouter une balise de style inline au 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>
        )
    }
}
2
Eugene R. Wang

Avait les mêmes problèmes tout en travaillant avec Material UI React et l'application Create React. Voici la solution qui a fonctionné pour moi. Notez que j'ai configuré un alias webpack pour le chemin relatif

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

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

<div style={BackgroundHead}>
0
Meir Snyder