How to get image from public folder without using Webpack

Question

I have read a lot of posts on getting image from the public folder with Webpack. However, is there anyway to do so without a Webpack?

My code structure:

./public/logo.png
./src/../source_file.js (which renders an <img> and that needs to be pointed to the logo image

I tried import img from './logo.png' but that is not working. Also tried relative path but reactjs is preventing me from importing anything outside src folder.

Answer 1

As long as your package.json is at the root, this will work:

import logo from '../../public/logo.png';

const MyComponent = () => (<div>
 <img src={logo} alt={"logo"} /> 
</div>);
export default MyComponent;

Otherwise, assuming you are copying your /public folder to the root of your webserver, you can also simply do <img src="/logo.png" alt="logo">