如何在React组件div中显示背景图片?

时间:2019-01-05 20:40:19

标签: css reactjs

我有一个Header功能组件,并将div分配给Header className。该div有背景图片,但没有渲染。开发工具告诉我div未分配Header className。我究竟做错了什么?提前致谢!

enter image description here

我检查过的内容: •如果导入了CSS文件并将className分配给div。 •如果我为URL图像分配了正确的路径。 •background-size值是否应该包含或包含。 •如果background-image键应该是backgroundImage

APP.js

import React, { Component } from 'react';
import Header from './Components/Header/Header';

class App extends Component {
  render() {
    return (
      <div>
        <Header />
      </div>
    );
  }
}

export default App;

HEADER.js

import React from 'react';
import classes from './Header.css';

const Header = () => {
  return (
    <div className={classes.Header}>
      <p>Hello</p>
    </div>
  );
};

export default Header;

HEADER.css

.Header {
  height: 95vh;
  background-image: "url('../../Images/horseshoebend.jpg')";
  background-size: cover;
  background-position: top;
}

结果应显示背景图像。

0 个答案:

没有答案