Image on React and/or CSS not appearing

Question

I am unable to insert an image to my sign up page. I have tried inserting it using index.js (HTML codes in React component) and also in the corresponding CSS file. Both not working. Sharing the codes and screenshot below (I have removed irrelevant import codes):

React Component code:

import styles from "./register.css";

    return(
        <div>
            <div id="styledImg">
                <img alt="" title="" src="../../src/assets/bocLogo.png"/>
            </div>
        </div>
    );
}

export default Register;

CSS code:

#styledImg {
    width: 1110px;
    height: 428px;
    height: 428px;
    position: absolute;
    top: 245px;
    left: 87px;
}

#styledImg Img {
    max-width: 100%;
    max-height: 100%;
}

Answer 1

You have to import the image and then use the imported file as src. it would be something like this.

import logo from '.../../src/assets/bocLogo.png';

and then you will use this logo in src

<img src={logo} alt="Logo" />;

for more information please check This link