I have an image in the public folder called logo.png
when I try to import it in my index.js file (src/view/index.js) :
import logo from "public/logo.png";
I always get this error :
Module not found: You attempted to import /public/logo.png which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
If you are using an <img>
element to display the image, it will have a src
attribute. In that case, you can use the image url for the soruce. It looks like this:
const logo = `${process.env.PUBLIC_URL}/logo.png`;
Then to render it, you would have something like this:
<img
alt='my-logo'
src={logo}
/>