ReactJS и Webpack: изображения не отображаются - PullRequest
Новая
       10

ReactJS и Webpack: изображения не отображаются

0 голосов
/ 29 октября 2018

Я пытаюсь загрузить фоновое изображение и не могу его отрендерить. В моем компоненте, когда я загружаю изображение с помощью require ('imagepath'), оно изменяет его на url ('imagepath') при сборке. Однако, когда я пытаюсь загрузить это внутри моих стилей, которые я помещаю в тему, он не рендерится. Вместо этого я должен сделать эту забавную нагрузку. (см. фоновое изображение) Что я делаю не так ?? 

 import React, { Component } from 'react';
import '../styles/App.css';
import CssBaseline from '@material-ui/core/CssBaseline';
import Grid from '@material-ui/core/Grid';
import { withStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card'
import CardHeader from '@material-ui/core/CardHeader'
import CardActions from '@material-ui/core/CardActions'
import Button from '@material-ui/core/Button'
import Image from './brisket.jpg'


const styles = theme => ({
  '@global': {
    body: {
      height: '100%'
    }
  },
  card: {
    backgroundImage: "url(" + require('./wood_background.jpg') + ")",
    flexGrow: 1,
    justify: 'center',
    minHeight: '100vh',
  },
  cardHeader: {
    backgroundColor: theme.palette.grey[200],
  }
})

const cards = [
  {
    title: 'Start Smoking',
    buttonText: 'Let\'s get started',
    buttonVarient: 'contained'

  }
]

class Intro extends Component {
  render() {
    const { classes } = this.props;
    return (
      <React.Fragment>
        <CssBaseline />
          <Grid container className={classes.card} alignItems='center' justify='center' spacing={40}>
            {cards.map(card => (
              <Grid item key={card.title} md={4}>
                <Card>
                  <CardHeader
                    title={card.title}
                    titleTypographyProps={{ align: 'center' }}
                    className={classes.cardHeader}
                  />
                  <CardActions>
                    <Button fullWidth variant={card.buttonVarient} color='primary'>
                      {card.buttonText}
                    </Button>
                  </CardActions>
                </Card>
              </Grid>
            ))}
          </Grid>
      </React.Fragment>
    );
  }
}

export default withStyles(styles)(Intro);

1 Ответ

0 голосов
/ 29 октября 2018

Вы можете импортировать изображение, позже вы можете перейти к атрибуту backgroundImage.

Импорт изображения. 

import woodImage from './wood_background.jpg';

Позже передать атрибут woodImage в backgroundImage. 

card: {
  backgroundImage: "url(" + woodImage + ")",
  backgroundSize: "cover"
},
...