Question

我正在创建一个简单的React应用程序（使用create react app作为起点），其中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"/>
}
}

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

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

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

背景图片不会显示在React组件中

2 个答案: