React - import image from public folder

In this article, we would like to show you how to import image from public folder in React.

Quick solution:

<img src="/image.jpg" />

Practical example

In this example, we simply specify the image name (image.jpg) with preceding slash as an img source. React will know, that the image is in the public folder.

import React from 'react';

const MyComponent = () => {
  return (
    <div>
      <img src="/image.jpg" />
    </div>
  );
};

export default MyComponent;

Note:

If you have images/ folder inside public/ directory, just specify the image src as follows:

<img src="/images/image.jpg" />