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
– David, Commented Nov 2, 2016 at 12:36
How do you serve your app? And how do you preview it in the browser? — cema-sp
– cema-sp, Commented Nov 2, 2016 at 12:48

Kishore Chandra · Accepted Answer · 2016-11-02 13:11:05Z

2

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 2, 2016 at 13:11

Kishore Chandra

6061 gold badge6 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

EdG Over a year ago

This Worked. Thanks

Kishore Chandra Over a year ago

@user3761761 It is good to upvote a perfect answer for your solution. It helps the community.

Shubham Khatri · Accepted Answer · 2016-11-02 14:14:11Z

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 2, 2016 at 14:14

answered Nov 2, 2016 at 12:51

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

5 Comments

Jed Fox Over a year ago

You shouldn’t need to use the require. That will crash your JS.

Shubham Khatri Over a year ago

@JF Why will it crash my JS. I don't see it happening in my case.

Jed Fox Over a year ago

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.

Shubham Khatri Over a year ago

@JF I have been using this syntax for a long time and never faced any issue with ti

Shubham Khatri Over a year ago

@JF have a look at this SO question stackoverflow.com/questions/34582405/…. OP did not specify explicitly what he is using to compile the JSX.

Collectives™ on Stack Overflow

Error while trying to add image to react project

2 Answers 2

2 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related