I want to insert an image as background in card.I have saved the image in public/img/login.png .The image isn't shown..I'm using coreui react admin template.This is my code ::
<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>
You have created a assest folder inside of your root folder then you can add a images folder there and take the relative path and import it in the background image url.
import the image
import Yourimage from '../images/background_image.png';
var imgStyle= {
backgroundImage: `url(${Yourimage})`
};
class ImgComponent extends Component {
render() {
return (
<div style={imgStyle}>
</div>
);
}
}