Hintergrundbild in der Reaktionskomponente

Ich erstelle eine Seite und möchte, dass ein Material-UI-Element ein Hintergrundbild verwendet background-image CSS-Eigenschaft. Ich habe es natürlich gegoogelt und es gibt Lösungen, aber aus irgendeinem Grund kann ich dieses Bild nicht sehen.

PS1: Selbst die Änderung dieses Material-UI-Elements in „normal“ hat mir überhaupt nicht geholfen.

PS2: Wenn ich einen Container verwende, wird es angezeigt, aber das ist nicht das, was ich will.

UPDATE1: Ich habe versucht, dem Container Höhe und Breite hinzuzufügen, aber immer noch kein Erfolg …

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>
        )
    }
}

Sie müssen das Bild wie folgt importieren und dabei den relativen Pfad verwenden.

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>
        )
    }
}

Ich habe eine Lösung für meinen Fall gefunden. Es hat tatsächlich geholfen, die Containerhöhe in Pixel festzulegen.

Hier ist der 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>
        )
    }
}

Ich habe dies für material-ui zum Laufen gebracht, wo der Abstand meines übergeordneten Elements 24 Pixel betrug, also habe ich 48 Pixel zur Breite des Hintergrundbilds hinzugefügt, damit es funktioniert …

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>

Hatte die gleichen Probleme bei der Arbeit mit Material UI React und der Create React App. Hier ist die Lösung, die für mich funktioniert hat. Beachten Sie, dass ich einen Webpack-Alias ​​für den relativen Pfad eingerichtet habe

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

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

<div style={BackgroundHead}>

Wie Romainwn sagte, müssen Sie das Bild in die Datei importieren. Stellen Sie sicher, dass Sie den relativen Pfad zum übergeordneten Element verwenden

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

Tun

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

Ein weiterer Trick wäre das Hinzufügen eines Inline-Style-Tags zur Komponente:

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>
        )
    }
}

Sie können Requisiten in MUI v5 sxen

import React from 'react';

import Paper from 'material-ui/Paper';

import Image from '../img/main.jpg';


export default class Home extends React.Component{
    render(){
        return(
            <Paper sx={{ backgroundImage: `url(${Image})` }}>

            </Paper>
        )
    }
}