Images Not Loading In React

not able to display the image getting an error as not found but i have provided the full path for it. I don't know where i am going wrong. class App extends React.Component {

Solution 1:

If you are using webpack, you need to use require while mentioning the src for img tag. Also the url must be relative to the component.

classAppextendsReact.Component {

   render() {
      return (
         <div><h1> hello</h1><imgsrc={require("./home/priyanka/Finalproject/src/components/3.jpg")} alt="cannot display"/></div>

      );
   }
}

exportdefaultApp;

If you are not using webpack then simplly wrapping the src value within {} will work

classAppextendsReact.Component {

   render() {
      return (
         <div><h1> hello</h1><imgsrc={"./home/priyanka/Finalproject/src/components/3.jpg"} alt="cannot display"/></div>

      );
   }
}

exportdefaultApp;

Solution 2:

You can read Why can't I do <img src="C:/localfile.jpg">? to know why it is not working.

If you use following method

import img from"/home/priyanka/Finalproject/src/components/3.jpg";
classAppextendsReact.Component {



   render() {
      return (
         <div><h1> hello</h1><imgsrc={img}alt="cannot display"/></div>

      );
   }
}

exportdefaultApp;

Solution 3:

let's say you have your images folder inside the public folder.

try:

<img src={process.env.PUBLIC_URL + "/images/dog.png"}