的过程如下:
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
},
],
},
],
},
};
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
serviceWorker.unregister();
function App() {
return (
<div className="App">
<img src={image} alt="example" className="image" />
</div>
);
}
export default App;
通过以上步骤,你可以使用webpack和React成功加载图片。在这个过程中,webpack通过file-loader加载器将图片文件复制到输出目录,并返回图片的URL,然后React使用该URL来显示图片。这样可以确保在构建过程中正确处理图片,并在应用程序中使用它们。
推荐的腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云