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.

@JaisonJustus That's definitely not working. I believe I need that require because of webpack. I used Vuejs before and I needed that require for adding images to my webpage. I just don't know what I did wrong with react — Young, Jul 28 '18 at 07:26
If you import the image (e.g. import imgVar from ' ./img/hand.jpg') and then write does it help? If not, change the image name to a non existent image. Do you get an error? If you do, I guess that it means that the first import worked and the problem is in the — Yossi, Jul 28 '18 at 08:30
@Rahamin It doesn't help to change to import. And yes it does give an error if I used a non-existant image name. How do I fix it? — Young, Jul 28 '18 at 08:35
So the problem is not in the import command, but in the img src... strange. No idea. Sorry — Yossi, Jul 28 '18 at 08:48
The only idea I have is to start a new project with create-react-app and insert there the image and this component only, maybe it works. Your code seems fine. — Yossi, Jul 28 '18 at 10:29

score 9 · Answer 1 · edited Dec 01 '21 at 16:36

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

score 1 · Answer 2 · answered Jul 28 '18 at 07:38

1

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

answered Jul 28 '18 at 07:38

Thomas.lin

430
1
5
11

This picture is in the same sub-folder of src as my js file. – Young Jul 28 '18 at 07:40
2

Do you use create-react-app to create your app? wepack has a limit for the size of the pic. If the pic exceed the size in the config file,then it will not be packed. Maybe you can check it. – Thomas.lin Jul 28 '18 at 07:47
Oh. What's the limit in size? – Young Jul 28 '18 at 07:49
I found that the limit of size is 2MB, but my picture is only 39KB. – Young Jul 28 '18 at 07:58
Try this. https://stackoverflow.com/questions/34582405/react-wont-load-local-images?answertab=active#tab-top. It is the same problem with you. – Thomas.lin Jul 28 '18 at 07:59
I didn't see anything that could help in this question. – Young Jul 28 '18 at 08:08
em,you can check your console first,then see whether it loads the pic sucessfullly? – Thomas.lin Jul 28 '18 at 08:12
I don't see anything in my console that is related to this particular js file. – Young Jul 28 '18 at 08:16

score 1 · Answer 3 · answered Oct 21 '21 at 17:56

1

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

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

answered Oct 21 '21 at 17:56

Netanel Mantzur

31
2

Harikrishnan · Answer 4 · 2018-07-28T07:46:54.937

0

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

edited Jul 28 '18 at 07:46

answered Jul 28 '18 at 07:34

Harikrishnan

1,097
8
13

1

I tried this and the result is the same. It doesn't work for me. Still, no error message. – Young Jul 28 '18 at 07:38
Yes. If the path is not correct, there will be an error message. I tried. – Young Jul 28 '18 at 07:39
can you put the image in the public folder and try again,i will edit the code – Harikrishnan Jul 28 '18 at 07:39
I got an error: failed to compile. Module not found: You attempted to import ../../../public/hand.png which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_modules/. – Young Jul 28 '18 at 07:44
@Young I have added a working sample in codesandbox,please do check – Harikrishnan Jul 28 '18 at 07:44
@Young you don't need to import image if it is put in public folder – Harikrishnan Jul 28 '18 at 07:51
It's the same, the picture still doesn't show up even if I put it in the public folder. – Young Jul 28 '18 at 08:00

score 0 · Answer 5 · answered Dec 05 '20 at 14:04

0

Put your images into your public folder.

answered Dec 05 '20 at 14:04

DS_CodeGeek

11
3

reactjs image doesn't show up

5 Answers5