Question 51746 in Javascript Question posted in
A very good W3school tutorial can be found here.

How do I add images in react component? – Javascript

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;
Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

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

    <img src="/Image/cats.jpg" alt="a cat" />
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search