Webpack url-loader or file-loader not working react app

For loading images using url-loader

If you notice inside config/webpack.config.jsThere is a module object which has rules object inside it.For the rules or list of rules provided there is limit keylimit key is very important

Significance of limit value-if the size of image to be loaded is greater than the limit value provided then by default file-loader is used.e.gif I have below webpack.config.js configuration

{  test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],  loader: require.resolve('url-loader'),  options: {             limit: 10000,             name: 'static/media/[name].[hash:8].[ext]',           },},

inside my moudules -> rules object

Above the limit value is 10000 bytesso webpack will load only those images using url-loader whose size is less than 10000 bytes if size of image is found equal to or greater than 10000 then file-loader is used by default until fallback loader is not specified.

So suppose if you are dynamically adding a image something like this inside your code.

import largeimage from '../static/images/largeimage.jpg' or whatever pathand the size of largeimage is less than the limit value the image will not get loaded.

SOLUTION

For the webpack to load the image using url-loader your largeimage size should be less than limit value.

So either increase limit or decrease size of image.

Referencehttps://webpack.js.org/loaders/url-loader/#limit

url-loader is not loading image as separate file, it encodes the file into base64 format and includes it into js bundle. Hence there will be no separate request to the image file. See this answer:Url-loader vs File-loader Webpack

Try to load images with file-loader instead. I usually load both fonts and images with file-loader and it is working correctly.

I am using this working configuration (development):

// this is configured outside of the exported webpack configuration codeconst BASE_DIR = resolve(`${__dirname}`);module.exports = {    mode: 'development',    devtool: 'eval-source-map',    resolve: {        modules: [            resolve(BASE_DIR),            'node_modules'        ]    },    output: {        // ...        publicPath: '/'    },    module: {        rules: [            // ...            {                test: /\.(png|svg|jpg|jpeg|gif|tiff)$/,                use: [                    'file-loader?name=assets/[name].[ext]'                ]            },            // ...        ]    }    // ...}

My image file is physically located at 'src/assets/logo_arc.png' and I am using it this way:

import logo from 'src/assets/logo_arc.png';// ...<img src={logo} alt={'company logo'} />

I can see my file located in development build directory under subdirectory assets as I would expect.

When running application on webopack dev server (on localhost, my custom port 9901) the image is served on address http://localhost:9901/assets/logo_arc.png.

In the development bundle I can see this involved parts:

// definition of webpack public path/******/    // __webpack_public_path__/******/    __webpack_require__.p = "/";// ...// the image itself as a webpack module/***/ "./src/assets/logo_arc.png":/*!*********************************!*\  !*** ./src/assets/logo_arc.png ***!  \*********************************//*! no static exports found *//***/ (function(module, exports, __webpack_require__) {eval("module.exports = __webpack_require__.p + \"assets/logo_arc.png\";//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9zcmMvYXNzZXRzL2xvZ29fYXJjLnBuZz8wMmVlIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGlCQUFpQixxQkFBdUIiLCJmaWxlIjoiLi9zcmMvYXNzZXRzL2xvZ29fYXJjLnBuZy5qcyIsInNvdXJjZXNDb250ZW50IjpbIm1vZHVsZS5leHBvcnRzID0gX193ZWJwYWNrX3B1YmxpY19wYXRoX18gKyBcImFzc2V0cy9sb2dvX2FyYy5wbmdcIjsiXSwic291cmNlUm9vdCI6IiJ9\n//# sourceURL=webpack-internal:///./src/assets/logo_arc.png\n");/***/ }),

// importing webpack module into variable, it is used later in the img elementvar src_assets_logo_arc_png__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! src/assets/logo_arc.png */ "./src/assets/logo_arc.png");// ...// usage in the img elementreact__WEBPACK_IMPORTED_MODULE_0__["createElement"]("img", {        src: src_assets_logo_arc_png__WEBPACK_IMPORTED_MODULE_7___default.a,        alt: 'company logo'      }))