如何在卡片中插入背景图像以做出反应？

Question

我想在卡片中插入一个image 作为背景。我已将image 保存在 public/img/login.png 中。image 未显示。我正在使用 coreui react 管理模板.这是我的代码::

<CCard className="text-white bg-primary py-5 d-md-down-none " style={{ width: '44%' , backgroundImage: "url(/login.png)" }}>
  <CCardBody className="text-center ">
     <div>
        <h2>Sign up</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <Link to="/register">
          <CButton color="primary" className="mt-3" active tabIndex={-1}>Register</CButton>
        </Link>
      </div>
    </CCardBody>
</CCard>

Answer 1

您已经在根文件夹中创建了一个 assest 文件夹，然后您可以在其中添加一个 images 文件夹并获取相对路径并将其导入背景图像 url。

导入图片

import Yourimage from '../images/background_image.png';

var imgStyle= {
  backgroundImage: `url(${Yourimage})`
};

class ImgComponent extends Component {
  render() {
    return (

      <div style={imgStyle}>
      </div>
    );
  }
}