Images not loading in React

Question

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 {

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

export default App;

Answer 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.

class App extends React.Component {

   render() {
      return (
         <div>
  <h1> hello</h1>

<img src={require("./home/priyanka/Finalproject/src/components/3.jpg")} alt="cannot display"/>

         </div>

      );
   }
}

export default App;

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

class App extends React.Component {

   render() {
      return (
         <div>
  <h1> hello</h1>

<img src={"./home/priyanka/Finalproject/src/components/3.jpg"} alt="cannot display"/>

         </div>

      );
   }
}

export default App;

Answer 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";
class App extends React.Component {



   render() {
      return (
         <div>
  <h1> hello</h1>

<img src={img} alt="cannot display"/>

         </div>

      );
   }
}

export default App;