Reactjs 图:您可能需要适当的加载程序来处理此文件类型
我不知道在ReactJS网页包中加载图像的合适加载程序是什么 你能帮我一下吗? 我得到这个错误:Reactjs 图:您可能需要适当的加载程序来处理此文件类型,reactjs,webpack,Reactjs,Webpack,我不知道在ReactJS网页包中加载图像的合适加载程序是什么 你能帮我一下吗? 我得到这个错误: Module parse failed: /Users/imac/Desktop/fakeeh/imgs/logo.png Unexpected character '�' (1:0) You may need an appropriate loader to handle this file type. 以下是网页包配置: const path = require('path'); modu
Module parse failed: /Users/imac/Desktop/fakeeh/imgs/logo.png Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
以下是网页包配置:
const path = require('path');
module.exports = {
// the entry file for the bundle
entry: path.join(__dirname, '/client/src/app.jsx'),
// the bundle file we will get in the result
output: {
path: path.join(__dirname, '/client/dist/js'),
filename: 'app.js',
},
module: {
// apply loaders to files that meet given conditions
loaders: [{
test: /\.jsx?$/,
include: path.join(__dirname, '/client/src'),
loader: 'babel-loader',
query: {
presets: ["react", "es2015", "stage-1"]
}
}],
},
// start Webpack in a watch mode, so Webpack will rebuild the bundle on changes
watch: true
};
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}
]
}
}
非常感谢 您可以使用。你需要先用npm安装它,然后像这样编辑你的网页配置
module: {
// apply loaders to files that meet given conditions
loaders: [{
test: /\.jsx?$/,
include: path.join(__dirname, '/client/src'),
loader: 'babel-loader',
query: {
presets: ["react", "es2015", "stage-1"]
}
},
{
test: /\.(gif|svg|jpg|png)$/,
loader: "file-loader",
}],
},
我也遇到了这个问题,我找到了一个解决办法 首先,您需要安装两个加载程序(文件加载程序、url加载程序)。 例如 $npm安装--保存文件加载程序url加载程序 如果你想支持css。确保安装了样式加载器。 例如。, $npm安装--保存样式加载器css加载器 接下来,您将更新webpack配置,请检查下面的示例配置。希望能有帮助
module: {
loaders: [{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/
}, {
test: /\.css$/,
loader: "style-loader!css-loader"
}, {
test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
loader: 'url-loader?limit=100000' }]
},
对于Webpack 3,您可以使用
url加载器
,如下所示:
安装:
然后,在您的网页包配置中:
const path = require('path');
module.exports = {
// the entry file for the bundle
entry: path.join(__dirname, '/client/src/app.jsx'),
// the bundle file we will get in the result
output: {
path: path.join(__dirname, '/client/dist/js'),
filename: 'app.js',
},
module: {
// apply loaders to files that meet given conditions
loaders: [{
test: /\.jsx?$/,
include: path.join(__dirname, '/client/src'),
loader: 'babel-loader',
query: {
presets: ["react", "es2015", "stage-1"]
}
}],
},
// start Webpack in a watch mode, so Webpack will rebuild the bundle on changes
watch: true
};
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}
]
}
}
最后,在代码中:
<img src={require('./path/to/image.png')} />
有时候解决方案更简单,就在你面前 我立即开始用谷歌搜索这个问题。 但我在测试中错过了jpg扩展 所以。。我的测试是:
test:/(png | woff(2)?eot | ttf | svg | gif | jpe?g)(\?[a-z0-9=\.]+)?$/
谢谢,这非常有效,因为我们已经在使用url加载器了。@PrakashSharma,谢谢,我认为我的不起作用,因为它是遗留的,大约一年前,今天才发现它是按照您的说明工作的。它在npm安装中提到了文件加载器和url加载器,但在webpack配置中,只提到了url加载器。为什么呢?url加载器是否在幕后使用文件加载器?@redfox05似乎url加载器可能在幕后使用文件加载器。我试图按照每个网页文档的说明进行操作,只添加了“url加载器”,然后收到一个错误,说明找不到“文件加载器”。安装了“文件加载器”,一切正常。