如何在React的Card组件中插入背景图？CoreUI模板下图片不显示如何解决

问题原因&解决方案 #

• 第一处错误是图片路径不匹配：你将图片存储在public/img/login.png路径，代码中写的/login.png会默认查找public根目录下的login.png文件，自然无法命中资源，将路径修改为/img/login.png即可。
• 第二处错误是样式优先级冲突：你给CCard组件添加了bg-primary类名，这个CoreUI内置类自带背景色属性，优先级高于行内的backgroundImage样式，会覆盖背景图显示，直接移除bg-primary类名即可，如果你需要保留底色做 fallback，也可以给背景图样式添加!important提升优先级。
• 建议补充背景图控制属性：默认背景图会平铺、按原始尺寸显示，建议补充backgroundSize、backgroundPosition、backgroundRepeat三个属性优化显示效果。
• 额外排查项：如果你的项目配置了部署子路径，可使用React内置的process.env.PUBLIC_URL拼接路径，保证生产环境也能正常加载资源，写法为backgroundImage: url(${process.env.PUBLIC_URL}/img/login.png)``

修正后完整代码 #

<CCard className="text-white py-5 d-md-down-none " style={{ 
  width: '44%', 
  backgroundImage: "url(/img/login.png)",
  backgroundSize: 'cover',
  backgroundPosition: 'center',
  backgroundRepeat: 'no-repeat'
}}>
  <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>

内容的提问来源于stack exchange，提问作者Gandom