1. 在js 中创建图片来引入
import img from './a.jpg' // 把图片引入 ，返回的结果是一张新的图片地址
let image = new Image()
// image.src = './a.jpg' // 就是一个普通的字符串
image.src = img
document.body.appendChild(image)
/** file-loader 默认会在内部生成一张图片 到build目录下，
把生成的图片的名字返回回来
*/
yarn add file-loader -D
rules: [
{
test: /\.(png|jpg|gif)$/,
use: 'file-loader'
}
]
1.2 url-loader
url-loader可以通过limit属性对图片分情况处理，当图片小于limit（单位：byte）大小时转base64，大于limit时调用file-loader对图片进行处理。（url-loader里面已经包含了file-loader，可完全用url-loader替代,而且处理图片一般用url-loader）
yarn add url-loader -D
rules: [
{
test: /\.(png|jpg|gif)$/,
use: {
loader: 'url-loader',
options: {
esModule: false,
limit: 200 * 1024,
outputPath: 'img/' // 生成的图片放在指定的文件夹内
}
}
},
]
2. 在css中引入 background('./a.jpg')
// 上面的loader已经处理过了，可以直接引入
.img-box {
width: 500px;
height: 500px;
background: url("./a.jpg");
}
3. 在html中引入图片
<body>
<div>内容区</div>
<div class="img-box"></div>
<img src="./a.jpg" alt="">
</body>
yarn add html-withimg-loader -D
rules: [
{
test: /\.html$/,
use: 'html-withimg-loader'
}
]
网友评论