How to Import File from Public Folder in React Application

How to import file from public folder in react application?

I believe you are using create-react-app ... this is a feature included in the ModuleScopePlugin, and you can disable it by ejecting the app and editing your webpack configuration (as described in this answer).

But beware, the feature exists for a reason. The create-react-app build tool only processes the src/ directory, so for example your JavaScript outside of here will not be transpiled by Babel. Furthermore, you're typically trying to avoid polluting the global scope if you're using a bundler like Webpack. So unless you've got a really specific reason why you'd need to do this, I'd say try and move it.

React import images from public folder

You are using file-loader as webpack plugin, which does not work in the way of "just mirroring the directory structure of public to dist". You can find the documentation for that plugin here: https://webpack.js.org/loaders/file-loader/

Basically, what the plugin does is, if you import an image file (actually programatically importing it, not just using a string reference to its path), the file is copied to your dist directory, potentially renamed and than in your compiled source code the proper file name is inserted.

So in your case, if you want to solve your problem using file-loader, you would reference the image file like

// Relative path to image file from js file
import imageFile from './assets/image.png';

// ...
const component = props => <img src={imageFile}></img>;

If you want to use the approach of actually just mirroring a public-directory to the dist directory, you need to use an additional webpack-plugin for that (e.g. https://stackoverflow.com/a/33374807/2692307)

By the way, I assume it works in dev-mode because you are setting '/' as public path, so the development server just serves everything in the root directory as well. That is something different than copying the files to dist however as you are trying to achieve.

Access files in public directory after production (create-react-app)

EDIT: I was totally wrong. Here's the correct answer for create-react-app projects:

<img src={process.env.PUBLIC_URL + '/img/logo.png'} />;

https://create-react-app.dev/docs/using-the-public-folder/#adding-assets-outside-of-the-module-system

---

(old answer)

No ., just /images/rest/of/file/path.

How to fetch public folder .json file into react component

This is how I'd advice to import a json file:

import React from 'react'

export default function App() {
  const [users,setUsers] = React.useState([{}])
  React.useEffect(()=>{
    fetch('data/users.json').then((res)=>res.json()).then((data)=>{
      setUsers(data)
     })
     
  },[])
  return (
    <div className="App">
      <h1>Users:{users.length}</h1>
    </div>
  );
}

this is the sample users.json file:

[
  {
    "id": 1,
    "name": "name"
  },
  {
    "id": 2,
    "name": "name 2"
  }
]

this is the structure of the main directory:



Here is the code

---

Related Topics