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

your way of show image actually do work in React,I think its the matter of your path of the pic.Do you put all your static files under the public folder,or how do you manage your static pages?

<img src={require('./img/hand.png')} width="70" height="50" alt="cam"/>

Answer 3

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

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

Answer 4

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

    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="/imagename.jpg" width="70" height="50" alt="cam"/>
            </div>
        )}}

Here is a working sample

Answer 5

Put your images into your public folder.

Answer 6

I know two ways, from the component or from the public folder.

• A - From the component: you use CSS or Imports

import:

import img1 from "./assets/images/img.svg" 

CSS:

.img {
background-image: url("./assets/images/img.svg");
background-size: contain; /* Adjust the size of the image */
width: 10em;
height: 10em;
}

• B - From the public folder Then you can use

  <img src="/assets/images/img.svg"/>
  

Which of the two is better?, neither.