reactjs image doesn't show up

Question

I have a local image that I want to put on my webpage built in react. I looked at this but it didn't help me. My code is as following:

const right={
    float:"right",
    fontSize:"18px"
}

export default class CloseUpCam extends Component {
render() {
    return (
        <div className="closeupcam" style={right}>
            <div>CLOSEUP CAMERA</div>
            <img src={require('./img/hand.png')} width="70" height="50" alt="cam"/>
        </div>
    )}}

There's no error messages. The picture just doesn't show up. Does anyone know what's wrong? Thanks.

Answer 1

In react you must import your image file like all other files

import Image from "./img/hand.png";

const right = {
    float: "right",
    fontSize: "18px"
};

export default class CloseUpCam extends Component {
    render() {
        return (
            <div className="closeupcam" style={right}>
                <div>CLOSEUP CAMERA</div>
                <img src={Image} width="70" height="50" alt="cam"/>
            </div>
        );
    }
}

Answer 2

Put the images in the public folder of react app and try

<img className="" alt="Tag" src="/assets/images/tag.svg"/>