Reactjs 网页包:414请求URI对于图像太长
我正在开发一个网站使用反应,我使用网页包捆绑的文件。我在网站上使用了几个.png图像,但其中一个图像有问题,因为当我尝试创建包时,该图像未加载,在Google Chrome控制台中,我读到如下内容:Reactjs 网页包:414请求URI对于图像太长,reactjs,webpack,urlloader,Reactjs,Webpack,Urlloader,我正在开发一个网站使用反应,我使用网页包捆绑的文件。我在网站上使用了几个.png图像,但其中一个图像有问题,因为当我尝试创建包时,该图像未加载,在Google Chrome控制台中,我读到如下内容: GET http://localhost/bundle/data:image/png;base64,iVBOR...AAAAASUVORK5CYII= 414 (Request-URI Too Long) 这是我的webpack.config.js: 通过改变url loader?limit=10
GET http://localhost/bundle/data:image/png;base64,iVBOR...AAAAASUVORK5CYII= 414 (Request-URI Too Long)
这是我的webpack.config.js:
通过改变url loader?limit=100000中使用的限制,我注意到在30000以下,图像显示正确,但由于404错误,许多其他图像无法工作
如何解决这个问题?不需要像img src那样内联那么多数据,只需降低url加载程序的限制即可 例如,如果你用谷歌搜索一下,这个问题就有很多 我知道旧的浏览器也有问题,它们不接受长URI,所以我认为这就是为什么会有这样的限制
我建议将您的限额降低到最高10000谢谢您的回复。增加服务器的LimitRequestLine会返回一个403错误。如果我将url加载器限制降低到10000,我就解决了这个问题,但许多其他图像返回404错误未找到。我认为问题在于您的设置中的publicPath或outputPath,它会为您的图像生成错误的url,这就是为什么您会得到404,例如,babel将您的图像复制到/server/public/bundle/img.png文件夹中,但url loader只创建了url/img.png或/dist/img.png,这就是原因,但我不能确切地说您是对的。我为图像设置了publicPath:“bundle”,现在我没有更多的错误了。谢谢很高兴帮助@El_Merendero
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);