I am having trouble loading a background image in my component. Despite using require('imagepath') to load the image, it gets changed to url('imagepath') during build. However, when I try to load it within my styles that are being added to the theme, the image does not render properly. I have to resort to a workaround solution for this issue (refer to background image). What could be causing this problem?
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);