Webpack 不会加载 PNG 尽管需要重新安装、配置和模块

Question

关于这个问题有几个线程，但是到目前为止没有一个给我带来任何结果。正如标题所示，我的React项目包含一个img标签，其中提供了一个png作为它的源代码。

到目前为止，我已经尝试使用要求路径并将其导入为变量。我还在我的webpack配置中添加了加载器，如下所示。

同样值得注意的是，尺寸实际上是加载的，当右键单击以检查图像源时，网站返回Cannot GET/[object%20Object]

任何见解都非常感谢!

提前感谢!

图像标记

<img src={require('./mug1.png').default} className="mugImage" />

CSS

.mugImage {
object-fit: cover;
width: 100%;
height: 100%;
z-index: 10;
}

Webpack

const HtmlWebPackPlugin = require("html-webpack-plugin");
const htmlPlugin = new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
});
module.exports = {
mode: "development",
resolve: {
fallback: {
assert: require.resolve('assert'),
crypto: require.resolve('crypto-browserify'),
http: require.resolve('stream-http'),
https: require.resolve('https-browserify'),
os: require.resolve('os-browserify/browser'),
stream: require.resolve('stream-browserify'),
},
},
module: {
rules: [{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /.css$/,
use: ["style-loader", "css-loader"]
}, {
test: /.(jpg|png|svg)$/,
use: {
loader: 'url-loader',
options: {
limit: 25000
}
}
},
{
test: /.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
options: {
esModule: false,
},
},
],
},

]
},
plugins: [htmlPlugin]
};

Answer 1

您不需要同时使用两个加载器。两个加载器url-loader和file-loader工作相同，但不同之处是url-loader可以与limit配置为较小的文件内联，如DataURL。像

data:image/png;base64,ZXhwb3J0IGRlZmF1bHQgX193ZWJwYWNrX3B1YmxpY19wYXRoX18gKyAiNDRlYTU1N2FlYmM4ZTM2Y2EyOGQ2N2RlM2YwMWM2MWMucG5nIjs=

另一件事是file-loader在构建时将资产发送到输出目录。如果您选择使用url-loader

module.exports = {
...
module: {
rules: [
...
{
test: /.(jpe?g|png|svg)$/,
use: [{          {
loader: 'url-loader',
options: {
limit: 25000 //asset size limit in byte
name: '[name].[ext]',
outputPath: 'assets/images/'
},
}]
},
]
},
plugins: [...]
};

小于配置的资产大小将与DataURL内联，不会发出任何资产。Greater将作为单独的文件处理。forfile-loadertry

module.exports = {
...
module: {
rules: [
...
{
test: /.(jpe?g|png|svg)$/,
use: [{          {
loader: 'file-loader'
}]
},
]
},
plugins: [...]
};

这里保留其语法，不要通过esMoulde: false将其更改为CommonJS。从你的代码中删除。