Image on React and/or CSS not appearing-CodePudding

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%;
}

CodePudding user response：

You have to upload that image as a ReactComponent. import { ReactComponent as Logo } from "../../assets/your-image.png"; So that should look like:

import styles from "./register.css";
import { ReactComponent as Image } from "../../assets/your-image.png"

    return(
        <div>
            <div id="styledImg">
                <img alt="" title="" src={Image}/>
            </div>
        </div>
    );
}

export default Register;

CodePudding user response：

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