我有一个使用webpack和react的项目。我使用 file-loader / url-loader 在 webpack/react 设置中使用图像。在我的React项目中,我做了
import Img from '/image/source/image.jpg'
,但如果尝试<img src={Img}>
,src是一个base64代码,表示module.exports = __webpack_public_path__ + "images/code.61e3a3939c2f93f30ac21419625c9a4f.jpg";
并且没有显示图像。我该如何解决这个问题?
var webpack = require( 'webpack' )
var path = require( 'path' )
var BUILD_DIR = path.resolve( __dirname, 'src/client/public' );
var APP_DIR = path.resolve( __dirname, 'src/client/App' );
var config = {
mode : 'development',
entry : APP_DIR + '/index.jsx',
output : {
path : BUILD_DIR,
filename : 'bundle.js'
},
devServer : {
publicPath : '/',
contentBase : './src/client'
},
module : {
rules : [
{
test : /\.jsx|js?/,
include : APP_DIR,
exclude : /(node_modules)/,
loader : 'babel-loader',
query : {
presets : [ 'env', 'react' ]
}
},
{
test : /\.scss|.css$/,
loaders : [ 'style-loader', 'css-loader', 'sass-loader' ]
},
{
test : /\.(png|jp(e*)g|svg)$/,
use : [{
loader : 'url-loader',
options : {
limit : 8000,
name : 'images/[hash]-[name].[ext]'
}
}]
},
{
test : /\.(png|jp(e*)g|svg)$/,
use : {
loader: "file-loader",
options: {
name: "images/[name].[hash].[ext]"
}
}
}
]
}
};
module.exports = config;
我建议删除 webpack.config.js 中的文件加载器,只使用 url-loader,因为这两个插件的工作原理类似。据我了解,Webpack 现在使用两个加载器处理您的图像文件,正如您指定的两个加载器由以下内容触发。
test : /\.(png|jp(e*)g|svg)$/,
当图像通过两个加载器运行时,这可能就是您在图像源中看到
module.exports = __webpack_public_path__ + "images/code.61e3a3939c2f93f30ac21419625c9a4f.jpg";
的原因。
这是 webpack 文档 关于 url-loader 的说法。
url-loader 的工作方式与 file-loader 类似,但如果 文件小于字节限制。
此外,您指示 webpack 对相同的文件扩展名使用不同的文件名,这也可能会产生问题。
url-loader >
name : 'images/[hash]-[name].[ext]'
name: "images/[name].[hash].[ext]"
我已上传此 GitHub 存储库,您可以查看。它按照您的建议加载图像。调整 url-loader 的
limit
设置并检查源代码以查看 url 从 base64 编码图像到 URL 的更改。
对于 Webpack 5 使用 type: 'asset/resource'
webpack.config.js
{
test: /\.(png|jpe?g|gif|eot|woff2|woff|ttf|svg)$/i,
type: 'asset/resource'
}