Webpack: 414 Request-URI Too Long for an image

Question

I am developing a website using React and I use Webpack to bundle the files. I use several .png images on the site but I have a problem with one of these since when I try to create the package, this image is not loaded and in the Google Chrome console I read something like this:

GET http://localhost/bundle/data:image/png;base64,iVBOR...AAAAASUVORK5CYII= 414 (Request-URI Too Long)

This is my webpack.config.js:

const webpackConfig = env => {
    return {
        mode: env === "development" ? "development" : "production",
        entry: ["./src/index.tsx"],
        output: {
            filename: "bundle.js",
            path: path.join(__dirname, "server/public/bundle/")
        },
        resolve: {
            // Add '.ts' and '.tsx' as resolvable extensions.
            extensions: ['.ts', '.tsx', '.js', '.jsx']
        },
        module: {
            rules: [
                {
                    test: /\.(jsx|tsx|js|ts)$/,
                    loader: "ts-loader",
                    options: {
                        transpileOnly: true,
                         compilerOptions: {
                            target: env === "development" ? "ES6" : "es5"
                        }
                    },
                },
                {
                    test: /\.css$/,
                    use: ['style-loader', 'css-loader']
                },
                {
                    test: /\.(png|woff|woff2|eot|ttf|svg)$/,
                    loader: 'url-loader?limit=100000'
                }
            ]
        },
    }
};

module.exports = env => webpackConfig(env);

By varying the limit used in url-loader?limit=100000 I noticed that under 30000 the image is displayed correctly but many other images do not work due an 404 errors.

How can I fix the problem?

score 1 · Accepted Answer · answered Apr 06 '20 at 20:03

1

There is no need to inline that much data as img src, just lower the limit of url-loader.

If you google a lil bit there is a lot about this issue, for example

https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/414

How do I resolve a HTTP 414 "Request URI too long" error?

I know there is also problem with older browsers which won't accept long URIs so thats why there is that limit I think.

I suggest to lower your limit to max 10000

answered Apr 06 '20 at 20:03

Tonoslav

517
2
6
20

Thanks for the reply. Increasing the server's "LimitRequestLine" the image of my main post returns a 403 error (Forbidden). If I decrease the url-loader limit to 10000 I solve the problem but many other images return a 404 error (Not Found). – El_Merendero Apr 07 '20 at 19:38
1

I think problem is with publicPath or outputPath in your settings, it generate wrong url for your image and thats why you are getting 404, for example, babel copy your image into folder /server/public/bundle/img.png but url-loader creates url just /img.png or /dist/img.png and thas why, but I cannot tell exactly – Tonoslav Apr 07 '20 at 20:42
You were right. I set `publicPath: 'bundle'` for images and now I have no more errors. Thanks! – El_Merendero Apr 08 '20 at 08:00
happy to help @El_Merendero – Tonoslav Apr 08 '20 at 11:49

Webpack: 414 Request-URI Too Long for an image

1 Answers1