加载图片的方式
只是整理,未验证
yarn add url-loader file-loader -D
file-loader( 解决CSS等文件中的引入图片路径问题)
url-loader(当图片较小的时候会把图片BASE64编码,大于配置的limit参数的时候还是使用file-loader 进行拷贝)
css中引入
body{
color: red;
background: url(./images/001.jpg) no-repeat;
}
js动态引入
// 通过import方式引入图片
import imgUrl from './images/001.jpg'
// 通过CommonJS方式引入
let imgSrc = require('./images/001.jpg');
let img = new Image();
img.src = imgSrc;
document.body.appendChild(img);
html img标签
yarn add html-loader -D
// index.html
<img src="./images/002.jpg" alt="">
// webpack配置
module: {
rules: [{
test: /\.(png|jpg|gif)$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
publicPath: "./images/",
outputPath: "images/"
}
}
]
},
{
test: /\.(html)$/,
use: {
loader: 'html-loader',
options: {
attrs: ['img:src', 'img:data-src', 'audio:src'],
minimize: true
}
}
}
}