web-dev-qa-db-de.com

hintergrundbild in der Reakt-Komponente

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

S. 1: Auch wenn ich dieses MUI-Element auf regulär umgestellt habe, hat es mir überhaupt nicht weitergeholfen.

S. 2: wenn ich in container arbeite, zeigt es, aber das will ich nicht.

UPDATE1: Versuchte das Hinzufügen von Höhe und Breite zum Container, immer noch kein Glück ...

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

Ich habe eine Lösung für meinen Fall gefunden. Die Einstellung der Containerhöhe in Pixel hat geholfen.

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

Sie müssen das Bild über den relativen Pfad wie folgt importieren.

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

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

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 Hacker dazu 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>
        )
    }
}
2
Eugene R. Wang

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}>
0
Meir Snyder