CODEWITHSUNDEEP
reactjs
Young
Young

Reputation: 757

reactjs image doesn't show up

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.

Upvotes: 6

Views: 26717

Answers (6)

user25713260
user25713260

Reputation:

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.

Upvotes: 0

Neck
Neck

Reputation: 91

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

Upvotes: 9

Netanel Mantzur
Netanel Mantzur

Reputation: 61

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

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

Upvotes: 1

DS_CodeGeek
DS_CodeGeek

Reputation: 11

Put your images into your public folder.

Upvotes: 0

Harikrishnan
Harikrishnan

Reputation: 1097

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

Upvotes: 0

Thomas.lin
Thomas.lin

Reputation: 440

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"/>

Upvotes: 1

Related Questions