Error while trying to add image to react project

Question

I am working on a react project. I am trying to add an image to one of my components. I made a directory named "images" in my project structure tree and I have put my image in this directory (image of project structure is attached below). I want to pass this image as src to my img tag. For this I right clicked on image and selected "copy image path" and then pasted that path to src of img tag. But when I try to run it, I get an error saying "Failed to load resource: the server responded with a status of 404 (Not Found)". Here is my code of component and screenshot of project structure.

P.S. I am on Ubuntu Environment

export default class CustomizedAppComponent extends Component {
    render(){
        return(
            <div>
                <img src="/home/user/Documents/Tessact-Master/dev/js/images/logo.png"/>
            </div>
        );
    }
}

That looks like a system path from root. React is a server and therefore uses the http protocol from the root of the react project. — David, Nov 02 '16 at 12:36
How do you serve your app? And how do you preview it in the browser? — cema-sp, Nov 02 '16 at 12:48

score 1 · Accepted Answer · answered Nov 02 '16 at 13:11

1

No Need to use ../ or require in your url.. SIMPLE TRICK: It is very important from where you are serving you app. If you are serving your app from Tessact-Master then you code should be like this below

use just /dev not ./dev

export default class CustomizedAppComponent extends Component {
    render(){
        return(
            <div>
                <img src={"/dev/js/images/logo.png"}/>
            </div>
        );
    }
}

answered Nov 02 '16 at 13:11

Kishore Chandra

596
1
5
21

This Worked. Thanks – EdG Nov 02 '16 at 13:45
@user3761761 It is good to upvote a perfect answer for your solution. It helps the community. – Kishore Chandra Nov 02 '16 at 13:54

Shubham Khatri · Answer 2 · 2016-11-02T14:14:11.367

0

First of all the src of the image must be relative to the location of the component it is used in. Assuming the CustomizedAppComponent to be in the components or containers folder your image path must look like

 "../images/logo.png"/

if the component is again inside another folder inside folder components, then give path as

"../../images/logo.png"/             // add '../' so on

Also in react you may need to mention the src within a require if you are using webpack to transpile your jsx and if not and then omit require in the below code.

export default class CustomizedAppComponent extends Component {
    render(){
        return(
            <div>
                <img src={require("../images/logo.png")}/>
            </div>
        );
    }
}

edited Nov 02 '16 at 14:14

answered Nov 02 '16 at 12:51

Shubham Khatri

270,417
55
406
400

You shouldn’t need to use the require. That will crash your JS. – Jed Fox Nov 02 '16 at 13:42
@JF Why will it crash my JS. I don't see it happening in my case. – Shubham Khatri Nov 02 '16 at 13:44
If you `require()` an image file, there will be an invalid syntax error because the binary file is not valid JS. `require()` loads the file at the given path, executes it, and returns the `module.exports` object. – Jed Fox Nov 02 '16 at 13:48
@JF I have been using this syntax for a long time and never faced any issue with ti – Shubham Khatri Nov 02 '16 at 13:49
@JF have a look at this SO question http://stackoverflow.com/questions/34582405/react-wont-load-local-images. OP did not specify explicitly what he is using to compile the JSX. – Shubham Khatri Nov 02 '16 at 13:59
Thanks for telling me that! – Jed Fox Nov 02 '16 at 15:14

Error while trying to add image to react project

2 Answers2

Linked