Question

我目前已导入背景图片并尝试在组件的背景中渲染它。麻烦是它不呈现。我已经检查了位置，并尝试使用＆lt; img ...>，它渲染得非常好。不确定我做错了什么。我的代码如下：

import React, { Component } from 'react';
import TextField from 'material-ui/TextField';
import MenuIcon from 'material-ui-icons/AccountCircle';
import LockIcon from 'material-ui-icons/Lock';
import Button from 'material-ui/Button';
import Typography from 'material-ui/Typography';
import Background from '../images/background.jpg';

class Login extends Component {
  state = {
    username: '',
    password: '',
  }

  updateUsername = (e) => {
    this.setState({ username: e.target.value });
  }

  updatePassword = (e) => {
    this.setState({ password: e.target.value });
  }

  render() {
    const centre = {
      position: 'fixed',
      top: '45%',
      left: '50%',
      marginTop: '-50px',
      marginLeft: '-100px',
      textAlign: 'center',
    };
    const background = {
      backgroundImage: `url(${Background})`,
      backgroundSize: 'cover',
      overflow: 'hidden',
    };

    return (
      <div style={centre}>
        <div style={{ backgroundImage: background }}>
          <Typography color="primary" variant="display1">REPORTS PORTAL</Typography>
        </div>
      </div>
    );
  }
}

export default Login;

Answer 1

只需更改

<div style={{ backgroundImage: background }}>

到

<div style={{ ...background }}>

为了将背景的const属性设置为样式。

Answer 2

你可以简单地做

<div style={background}>

Answer 3

尝试更改

<div style={{ backgroundImage: background }}>

为：

<div style={background}>

样式需要一个对象，并且您通过在{}中包含已经定义为对象的内容来将对象包装在另一个对象中。您使用{{}}的唯一时间是：

<div style={{backgroundImage: `url(${Background})`, backgroundSize: 'cover', overflow: 'hidden'}}>

没有渲染的背景图像反应

3 个答案: