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:

xxxxxxxxxx

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

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.

xxxxxxxxxx

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:

Copy

xxxxxxxxxx

 

1

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