how to fix Background image not showing in react js

Question

i'm trying to add background image on my page, but the image not showing. I a

i've tried Background image in inline style, but still not working. my page still empty

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import Norway from '../image/norway_mist.jpg';

const imgUrl = '../image/norway_mist.jpg';
const styles = theme => ({
  root: {
    flexGrow: 1,
    backgroundImage:'url(' + imgUrl + ')',
    backgroundSize: 'cover',
    overflow: 'hidden',
  },
  paper: {
    padding: theme.spacing.unit * 2,
    textAlign: 'center',
    color: theme.palette.text.secondary,
  },
});

function CenteredGrid(props) {
  const { classes } = props;

  return (
    <div className={classes.root} style={{backgroundImage: 'url('+imgUrl+')'}}>
      <Grid container spacing={24}>
        <Grid item xs={12}>
        </Grid>
      </Grid>
    </div>
  );
}

CenteredGrid.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(CenteredGrid);

Blockquote

Help me fix this

Why is `url` in quotes? Does this need to be an actual function call instead? — Code-Apprentice, May 14 '19 at 16:06
Maybe this can help: https://stackoverflow.com/questions/37644265/correct-path-for-img-on-react-js — Code-Apprentice, May 14 '19 at 16:07
even i change the url to correct one, image still won't appear — clrxs, May 14 '19 at 16:12
Do you have any error in console tab or can you see it download the image in the network tab ? — Tony Ngo, May 14 '19 at 16:26
nope, i have not error on my console log. btw, i'm using material-ui, is it give it an impact to image background? — clrxs, May 14 '19 at 16:33

score 0 · Answer 1 · answered May 14 '19 at 17:08

0

try to change like below in your code

root: {
    flexGrow: 1,
    backgroundImage:'url(' + Norway + ')',
    backgroundSize: 'cover',
    overflow: 'hidden',
  },

<div className={classes.root} style={{backgroundImage: 'url('+Norway+')'}}>

Also make sure that you are added image files loader in your webpack config.

Hope this helps.

answered May 14 '19 at 17:08

VISWANATH K

126
2

i tried this way, still not work.but already fixed this problem with giving height in root. thanks anyway – clrxs May 14 '19 at 17:59

score -1 · Answer 2 · answered May 14 '19 at 16:17

-1

Try using require with the url, along with template literals (the backtick and ${ } syntax) it would look something like this:

style={{ backgroundImage: `url(require( ${imgUrl} ))` }}

answered May 14 '19 at 16:17

Joseph Gordy

106
1
7

how to fix Background image not showing in react js

2 Answers2