reactjs - 在 webpack 中加载图片
问题描述
我想使用 webpack 将图像加载到前端(反应)
webpack.config.js
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
devtool: 'cheap-module-eval-source-map',
entry: [
'webpack-hot-middleware/client',
'./src/index'
],
output: {
path: path.join(__dirname, 'dist/'),
filename: `[name].bundle.js`,
// `chunkFilename` provides a template for naming code-split bundles (optional)
chunkFilename: `[name].bundle.js`
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('development')
}
}),
new HtmlWebpackPlugin({template:'src/index.html'})
],
module: {
rules: [{
test: /\.js$/,
use: ['babel-loader'],
include: path.join(__dirname, 'src')
},{
test: /\.(jpg|png|svg)$/,
use: {
loader: "url-loader",
options: {
limit: 25000,
},
},
},{
test: /(\.css)$/,
use: ['style-loader',
'css-loader']
}, {test: /\.(jpe?g|gif|svg)$/i, use: ["file-loader"]}
]
}
};
索引.html
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
<img src="resourses/css/images/headerImage.jpg"/>
<script src="vendor.bundle.js"></script>
<script src="main.bundle.js"></script>
<img src="resourses/css/images/headerImage.jpg"/>
</body>
</html>
我的 package.json
"webpack": "^3.10.0",
"webpack-bundle-analyzer": "^2.11.1",
"webpack-dev-middleware": "^1.12.0",
"webpack-hot-middleware": "^2.22.1"
"file-loader": "^2.0.0",
"html-webpack-plugin": "^2.30.1",
"url-loader": "^0.5.7",
这是相同 html 的图像,但我已删除此问题的样式表链接。
我已经在 webpack 中设置了文件加载器,但是当我在浏览器中看到时,源代码中仍然没有显示图像。此外,我使用了 img 标签。它也没有给我任何结果。如果您需要更多数据,那么我将编辑该帖子,我们将不胜感激。
解决方案
推荐阅读
- c++ - 将 FFMPEG 帧写入 png/jpeg 文件
- sql-server - 如何在 INSERT 时输出临时表的值?
- forms - 我希望多个访问表单上的数据输入进入访问表的同一记录
- html - Github 链接锚是如何工作的
- uiscrollview - SwiftUI - 由于填充中的负值,ScrollView 不会滚动到底部
- ios - 在 CGContext 中渲染 UIImage 不显示图像的阴影
- laravel - 自动处理从队列中分派的作业
- ros - 如何在 ros 环境之外包含 ros msg?
- grafana - Grafana如何从influx db多次测量转换为分类数据
- mongodb - 如何使用聚合过滤来自 mongodb 的两个日期之间的数据:匹配、查找和项目?