npm run build is not including /public/images/images.png

Question

I am just testing the React Boilerplate with Material UI, and I am using some png images (stored in /public/images/). If I npm start the project load those images like a charm, but once I type in npm run build the builded project does not load the images in /public/images/. I am using React 16.8.6 and I am loading the images this way:

<Avatar src="../../public/images/my_image.png" ... />

After some research I tried importing images instead of loading it in the src prop of the component, but when npm run build still don't found any of them. Is there any configuration in the webpack I am missing or how can I solve this?

Answer 1

the solution I found was to install the copy-webpack-plugin and then modifying the webpack config like this:

plugins: options.plugins.concat([
   ...,
   new CopyWebpackPlugin([{ from: 'public' }])
])