Webpack：414 Request-URI Too Long for an image

Question

我正在使用 React 开发一个网站，并使用 Webpack 来打包文件。我在网站上使用了几个 .png 图像，但其中一个有问题，因为当我尝试创建包时，该图像未加载，并且在 Google Chrome 控制台中我读到如下内容：

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

这是我的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);

通过更改url-loader?limit=100000 中使用的限制，我注意到图像在 30000 以下可以正确显示，但由于 404 错误，许多其他图像无法正常工作。

我该如何解决这个问题？

Answer 1

不需要像img src那样inline那么多数据，只要降低url-loader的限制即可。

如果你用谷歌搜索一下，就会有很多关于这个问题的信息，例如

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

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

我知道不接受长 URI 的旧浏览器也存在问题，所以我认为这就是为什么会有这个限制。

我建议将您的 limit 降低到最大 10000