CODEWITHSUNDEEP
htmlcssreactjswebpack
user8796786
user8796786

Reputation:

React/Webpack images not loading, but CSS does

So I just want to use some images in my React application, but images are not loading up. Some images are set up in CSS like that: 

background-image: url('/../img/logo.png');

Another way I would like to use images in inside React components with img tag, how would I go about doing this?

Here is my webpack config: 

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = (env) => {
  const isProduction = env === 'production';
  return {
    entry: './src/app.js',
    output: {
      path: path.resolve(__dirname, 'public', 'dist'),
      filename: 'bundle.js'
    },
    module: {
      rules: [{
        loader: 'babel-loader',
        test: /\.js$/,
        exclude: /node_modules/
      }, {
        test: /\.s?css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              // you can specify a publicPath here
              // by default it use publicPath in webpackOptions.output
              publicPath: '../'
            }
          },
          {
            loader: 'css-loader',
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true
            }
          }
        ]
      }]
    },
    plugins: [
      new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: "styles.css",
    })
    ],
    devtool: isProduction ? 'source-map' : 'inline-source-map',
    devServer: {
      contentBase: path.resolve(__dirname, 'public'),
      historyApiFallback: true,
      publicPath: '/dist/'
    },
    performance: {
      hints: process.env.NODE_ENV === 'production' ? "warning" : false
    },
  }
};

index.html inside public folder: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Kinnisvara ABC</title>
    <link rel="stylesheet" href="/dist/styles.css" type="text/css">
  </head>
  <body>
    <div id="app"></div>
    <script src="/dist/bundle.js"></script>
  </body>
</html>

CSS is loading up, but images are not.

Pictures of my file structure: enter image description here

enter image description here

enter image description here

Can anyone help me with that, please?

Upvotes: 2

Views: 4601

Answers (4)

Hamid Mohamadi
Hamid Mohamadi

Reputation: 159

Fixed this like :

{ loader: 'url-loader', options: { limit: 10000, name: '[name].[ext]', esModule:false }, },

Upvotes: 0

Mukesh Burnwal Mike
Mukesh Burnwal Mike

Reputation: 499

You didn't added image loader like css so try to add that

test: /\.(gif|jpe?g|png)$/,

Upvotes: 0

Krina Soni
Krina Soni

Reputation: 930

    {
      test: /\.(gif|png)$/, //Customise according to your need
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 10000,
            name: PATH + '.[ext]' //Path will be assets or image path
          }
        }
     ]
    }

configure url-loader in webpack configuration like this.

Upvotes: 1

Thanh Ngo
Thanh Ngo

Reputation: 365

Have 2 way

  1. Use webpack url-loader Add this line to rules module in webpack file

    { test: /.(png|jpg|woff|woff2|eot|ttf|svg|gif)$/, loader: 'url-loader?limit=1024000' }

  2. Use serve to point image

Upvotes: 1

Related Questions