Question

我正在尝试在页面上添加背景图片，但该图片未显示。我一个

我尝试使用内联样式的背景图片，但仍然无法正常工作。我的页面仍然空白

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

帮我解决这个问题

Answer 1

尝试将require与url一起使用，以及模板文字（反引号和$ {}语法），看起来像这样：

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

Answer 2

尝试像下面的代码一样进行更改

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

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

还要确保在webpack配置中添加了图像文件加载器。

希望这会有所帮助。

如何修复React JS中未显示的背景图像

2 个答案: