时间戳

首页 > 解决方案 > 如何在卡片中插入背景图像以做出反应？

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

问题描述

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

<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>

标签： javascriptcssnode.jsreactjscore-ui

解决方案

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

导入图像

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

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

class ImgComponent extends Component {
  render() {
    return (

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

推荐阅读