React组件中不会显示背景图像

Question

[我正在创建一个简单的React应用（以create react应用作为起点），其中App.js返回以下内容：

  return (
    <div className="App">
      <NavBar />
      <Main />
    </div>
  );
}

export default App;

我正在尝试通过以下方式将图像添加到Main：

  return (
    <div className="bg">      
      <LogInSignUpModal />
    </div>
  );
}

export default Main;

在文件Main.css中，我具有以下内容：

    /* The image used */
    background-image:  url("../../images/WorkoutRack.jpg");

    /* Full height */
    height: 100%;
    width: 100%;

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

不幸的是，图像不会出现在主要组件中（主要组件应该占据了NavBar下方的整个页面。我尝试了其他StackOverflow响应中找到的许多不同解决方案，但是都没有用。我缺少什么？在这里？

Answer 1

首先检查此答案：React won't load local images如果那不是错误，请检查您的父样式或将px用于with和height。

Answer 2

您好，我们可以在React组件本身中以几种方式加载图像

import react from 'react'
import imageName from './location/of/image'

class App extends react.Component{
render(){
return(
<img src={imageName} alt="imagename"/>
}
}

第二种方法是使用require所有代码都相似，但是需要导入

import react from 'react'
Const imageName = require ('./location/of/image')

class App extends react.Component{
render(){
return(
<img src={imageName} alt="imagename"/>
}
}