CODEWITHSUNDEEP
webpack
Moe-Joe
Moe-Joe

Reputation: 1030

How can I include my image folder structure in my React App?

I hope you can help me.
When I run webpack my app gets built out into a dist folder.
enter image description here
Unfortunately the img folders don't get copied over so I end up with an app without images. What is the proper way to implement this through webpack or where is a good place to start? i've taken a look at the webpack documentation but am not sure where to look exactly.

webpack.config.js file below

const HtmlWebpackPlugin = require('html-webpack-plugin');
const sass = require('node-sass');
const path = require('path');

const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  template: './index.html',
  filename: 'index.html',
  inject: 'body'
})

module.exports = {
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test:/\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets:['env','react']
          }
        }
      },
      {
        test: /\.scss$/,
          use: [{
            loader: "style-loader"
          }, {
            loader: "css-loader"
          }, {
            loader: "sass-loader"
          }]
      }
    ],
    loaders: [
     { test: /\.json$/, loader: 'json' }
     // other loaders
    ]
  },
  plugins: [HtmlWebpackPluginConfig]
}

Any help is much appreciated.
Thank you
Moe

Upvotes: 1

Views: 996

Answers (3)

Miodrag Trajanovic
Miodrag Trajanovic

Reputation: 134

Image usage can be done using a dial pad, if a folder of images is placed in the Public folder in the reagent application, which would later be invoked by the application during the application development. The reason is that when you start using the npm start command, the public folder is placed on the port of 3000, localhost.

Upvotes: 0

Varun Sharma
Varun Sharma

Reputation: 1752

You should use file-loader for loading image files with webpack. Just install it via npm and add it to the loaders and you should be good to go. You can find more info about this in the webpack documentation.

Good Luck

If, in this way, it does not make it difficult to put the images on the page, try to insert them with their paths to data.json and then use the map method in some const to show them all on the page.

Upvotes: 3

WitVault
WitVault

Reputation: 24120

In your webpack config file use url-loader in loader rules. Inside your rules Just add one more rule for loading images:

{
    test: /\.(png|jpg|gif)$/,
    use: [
      {
        loader: 'url-loader',
        options: {
          limit: 8192
        }
     } ]
 }

Also install url-loader npm package.

To install it:

npm install url-loader --save-dev

It will install the url loader that can convert resolved paths of images as BASE64 strings. If files having size less than 8192 byte then image url will be returned otherwise if file size greater than limit then file will used directly via file-loader. You may need to install file-loader as well.

To install it:

npm install file-loader --save-dev

Upvotes: 1

Related Questions