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;

[more info](https://facebook.github.io/react-native/docs/image.html) Remember you're dealing with JSX not plain HTML — Marina Dunst, Jan 31 '17 at 10:20
Hope this answer helps you out [React image/asset management ](https://stackoverflow.com/a/61783390/11225762) — Mokesh S, May 13 '20 at 19:45

score 13 · Answer 1 · answered Jan 31 '17 at 10:41

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;

Are you sure the path to IMG is correct and relative to the component — Shubham Khatri, Jan 31 '17 at 11:26

score 6 · Answer 2 · answered Jul 14 '20 at 22:43

6

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

try:

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

answered Jul 14 '20 at 22:43

Dory Daniel

798
14
21

2

sometimes some people are like an angel in your life and right now you and your answer is playing that role for me. if i say "thank you so much", it's not enough. after two days, reading different solutions in this website, my eyes finally caught this gold answer. – Matin Jan 01 '22 at 18:58
1

never lose hope, you'll always find a way to solve your problem. you might/will face a lot more, just take a break or a walk..., and then do your research. Good luck! – Dory Daniel Jan 03 '22 at 17:25

score 2 · Answer 3 · edited May 23 '17 at 12:33

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;

edited May 23 '17 at 12:33

Community

1
1

answered Jan 31 '17 at 10:26

js_248

2,032
4
27
38

getting an error as ERROR in ./src/components/3.jpg Module parse failed: /home/priyanka/Finalproject/src/components/3.jpg Unexpected character '�' (1:0) You may need an appropriate loader to handle this file type. – Abhilash Muttalli Jan 31 '17 at 10:36
follow http://stackoverflow.com/questions/33469929/you-may-need-an-appropriate-loader-to-handle-this-file-type-with-webpack-and-b – js_248 Jan 31 '17 at 11:02

Images not loading in React

3 Answers3

Linked

Related