4

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.

isherwood
  • 58,414
  • 16
  • 114
  • 157
Mr.cysl
  • 1,494
  • 6
  • 23
  • 37
  • 1
    Are you using Create React App? All the assets in the `public` directory will be available at the root, so you can write `` – Tholle Jul 24 '18 at 18:37
  • @Tholle Is it? I'm using a Create React App but still uses that `../../IMAGE-NAME` (which I never like). :D – Radix Jul 24 '18 at 18:52
  • 1
    Yes, try to put `logo.png` in directly in the `public` directory and use `` to see it in effect. The `public` folder will also be copied into the `build` folder with the build script, so it will work in production as well. – Tholle Jul 24 '18 at 18:57
  • @Tholle Just checked my code, I was placing the images and other assets in assets folder under src, where we can't directly use the asset using their name. Is there any better way for that than using the ../../IMAGE-NAME? – Radix Jul 24 '18 at 19:05
  • 1
    @AtulKhanduri Importing them with Webpack with `../../IMAGE-NAME` is recommended, but there is nothing stopping you from keeping an image in the same folder as a component, if only that component uses the image, for example. Then you can just write `./IMAGE-NAME`. But for use cases when that is not appropriate, you can put them in the `public` folder. – Tholle Jul 24 '18 at 19:08
  • 1
    @Tholle The only issue is if the image is shared across several components then we have to place it outside of that folder (where component is placed). Anyways, thanks for your answers. – Radix Jul 24 '18 at 19:12
  • @Tholle Also tried but that does not seem to be working. Any thoughts? – Mr.cysl Jul 24 '18 at 19:30
  • @Mr.cysl Hard to say without seeing your code and directory structure, but you have to restart the dev server if you add something to the `public` directory. – Tholle Jul 24 '18 at 19:33
  • @Tholle The file was not changed but I still tried to restart. Nothing new happened. The structure is shown in the question. Is there anything confusing? – Mr.cysl Jul 24 '18 at 19:36

2 Answers2

2

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">

AnilRedshift
  • 7,937
  • 7
  • 35
  • 59
  • I think I have mentioned in the question but here is the detail of what I got by using this relative path. 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. You can either move it inside src/, or add a symlink to it from project's node_modules/. – Mr.cysl Jul 24 '18 at 19:31
  • @Mr.cysl thanks for that information. That's not something specific to react or webpack, but is an additional restriction from create-react-app. You can work around it here: https://stackoverflow.com/questions/44114436/the-create-react-app-imports-restriction-outside-of-src-directory – AnilRedshift Jul 24 '18 at 19:33
  • Thanks for the pointer. I tried `;` this one and that works if the path is in `src`. However, when I later tried to change it to `alt={}`, that does not seem to be working. Do you have any ideas? – Mr.cysl Jul 24 '18 at 19:41
0

I finally use window.location.origin + "logo.png". Posted here in case anyone want to have a try.

Mr.cysl
  • 1,494
  • 6
  • 23
  • 37