HTML中使用<img>标签

![](../../image/alarmLevel/cleared_round_5ecc49.png)复制代码

JS中使用require加载图片模块

const imgUrl  =  require('../../image/theme/light/nav/alarm.svg');复制代码

注意：路径一定要是相对路径

image-webpack-loader对比较大的图片进行压缩

依赖 url-loader、img-loader安装

cnpm install img-loader --save-devcnpm install --save-dev url-loader复制代码

安装image-webpack-loader

cnpm install image-webpack-loader --save-dev复制代码

webpack.config.js：

{        test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)$/i,        use: [            {              loader: 'url-loader',              options: {                limit: 10000 , /* 图片大小小于1000字节限制时会自动转成 base64 码引用*/                name: '[path][name].[ext]?[hash:6]!./dir/file.png'              }            },            /*对图片进行压缩*/            {              loader: 'image-webpack-loader',              query: {                progressive: true,                optimizationLevel: 7,                interlaced: false,                pngquant: {                  quality: '65-90',                  speed: 4                }              }            }          // {          //   loader:'url-loader?limit=5000&name=[path][name].[ext]?[hash:6]!./dir/file.png'          // }        ]}复制代码

效果：

小于10kb的图片

大的图片压缩