Error While Trying To Add Image To React Project

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

Solution 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

exportdefaultclassCustomizedAppComponentextendsComponent {
    render(){
        return(
            <div><imgsrc={"/dev/js/images/logo.png"}/></div>
        );
    }
}

Solution 2:

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.

exportdefaultclassCustomizedAppComponentextendsComponent {
    render(){
        return(
            <div><imgsrc={require("../images/logo.png")}/></div>
        );
    }
}