How do I add images in react component?

Question

I have a folder named Image inside my public folder that contains a jpg image file, however it's working in the browser. I've tried importing it using "import image ./public/Image/cats.jpg" and that hasn't worked either


import { Component } from 'react';
import './App.css';


class BasicFigure extends Component {

  render() {
    return (
      <figure>
        <img src="./public/Image/cats.jpg" alt="a cat" />
        <figcaption>This is a picture of a cat</figcaption>
      </figure>
    );
  }

}

export default BasicFigure;

Check your developer tools and notice where it's trying to load the image from and then fix your path. Probably easiest to make it an absolute path since components will often get bundled into a script meaning that the base path used for relative paths will change from development to production. — Ruan Mendes, Apr 04 '23 at 21:40

score 0 · Answer 1 · answered Apr 04 '23 at 21:02

This might depend on a few things. Like what bundler you are using and how it accesses files that it needs to build your app. However, another possible problem could be that you are declaring an incorrect relative path to the image source.

Note that <img src=".public/Image/cats.jpg" might need to have a different relative path. For example, if the public folder is right next to your React file, it should be ./pubic, not .public. Or in any case, make sure you write the correct relative path.

I fixed the relative path, unfortunately it's still not working. — Yannick, Apr 04 '23 at 21:33

score 0 · Accepted Answer · answered Apr 04 '23 at 21:32

0

In your component just give image path. React will know that its in public directory.

<img src="/Image/cats.jpg" alt="a cat" />

answered Apr 04 '23 at 21:32

Taki Kauser

58
6

How do I add images in react component?

2 Answers2