如何在 React 中导入 png 图像作为组件的背景？

Question

The earth.png image is in the same folder as the src folder, the src folder contains various components. I have an app.js file in the main app folder which also contains the src folder. This is the component I have in the app.js file, I tried to import the earth.png file and use it as a background for the React MDL component but it didn't work. Where am I going wrong?

import React, {Component} from 'react';
import './App.css';
import {Layout, Header, Navigation, Drawer, Content} from 'react-mdl';
import Earth from './earth.png';
import Main from './components/main';
import { Link } from 'react-router-dom';

class App extends Component {
  render() {
  return (

<div style={{height: '300px', position: 'relative'}}>
    <Layout style={{background: 'source = {require{/earth.png}} center / cover'}}>
        <Header transparent title="Continental Coders" style={{color: 'black'}}>
            <Navigation>
                <a href="/aboutme">About me</a>
                <a href="/projects">Projects</a>
                <a href="/resume">Resume</a>
                <a href="/contact">Contact</a>
            </Navigation>
        </Header>
        <Drawer title="Title">
            <Navigation>
                <Link to="/aboutme">About Us</Link>
                <Link to="/projects">Projects</Link>
                <Link to="/resume">Resume</Link>
                <Link to="/contact">Contact</Link>
            </Navigation>
        </Drawer>
        <Content>
        <div className="page-content">
        <Main/>
        </div>
       </Content>
    </Layout>
</div>
);
}
}

export default App;

Answer 1

When you import the image, assuming you have the appropriate loaders, it's bringing in the file path, so you can use it like you would any other URL:

style={{ background: `url(${Earth})`}}