在前端开发中,一般会有三种方式来引用图片,我们假设在src目录下img文件夹下有一个logo.jpg的图片
一种是在css中当作背景图引入:
style.css(根目录下,项目结构看第二篇)
body{
background: url('./img/logo.jpg')
}
另一种是在js中通过创建Image标签再引入:
index.js
import logo from './img/logo.jpg'
let img = new Image()
img.src = logo
第三种方式是在html标签中引入。
<img src="./img/logo.jpg" alt="">
如果不进行任何处理,在打包的时候这些图片文件是不会被打包的,以至于打包出来的图片找不到,下面看下该怎么处理。
前两种方式用url-loader来处理,它会在内部生成一张图片,并返回图片文件名。
安装:
npm install url-loader file-loader
在webpack.config.js里做一下配置:
module: {
rules: [
...
{
test: /\.(png|jpe?g|gif)$/,
use: [
{
test: /\.(png|jpe?g|gif)$/,
use: [
{
loader: 'url-loader',
options: {
//图片大小小于等于limit值,则会以base64形式加载,不会发请求,大于这个值则用file-loader加载
limit: 200*1024
},
},
],
},
],
},
...
],
},
第三种需要用html-withimg-loader
来处理,还是先安装,然后配置。
npm install html-withimg-loader
module: {
rules: [
...
{
test: /\.(png|jpe?g|gif)$/,
use: [
{
test: /\.html$/,
use: [
{
loader: 'html-withimg-loader',
options: {},
},
],
},
],
},
...
],
},
图片处理就写到这啦
网友评论