三种方法:
一、在js 中创建图片来引入
二、在css中引入background('url')
三、<img src=" " alt=" ">
1.在js创建图片引入
1.安装yarn add file-loader -D
安装依赖,并配置webpack.config.js
规则:
2.在导入的index.js文件中引入图片(file-loder会在内存生成一张图片 到 dist 目录下,生成图片的地址以logo
)
import './index.css';
import logo from './22.jpg'; //返回的结果 logo 是一个新的图片的地址
let image=new Image(); //创建新的图片对象
image.src=logo; //就是一个普通的字符串
// 将new 的图片插入到body 的后面
document.body.appendChild(image);
3.nom run dev
运行得到结果:
关于url-loader
:当图片小于 options
中设置的limit
使用 base64 转码图片减少请求
2.在css中引入(第一步存在可略过)
1.安装yarn add file-loader -D
安装依赖,并配置webpack.config.js
规则:
module:{
rules:[ //规则
{ //使用 file-loader 可以`(png|svg|jpg|gif)` 格式的图片 嵌入 到css中
test: /\.(png|svg|jpg|gif)$/,
use: ["file-loader"]
}
]
},
2.css中background
引入,再将css文件挂载到 index.js 文件中
//index.css
body{
background-color: yellow;
}
div{
width: 900px;
height: 800px;
background: url('../myImages/11.png');
}
3.npm run dev
成功
3.使用<img src=" " alt=" ">
1.安装loader:yarn add html-withimg-loader -D
2.webpack.config.js
添加配置
module:{
rules:[ //规则
{
test: /.css$/,
use: ["style-loader","css-loader"]
},
{ //使用file-loader 可以图片 嵌入 到css中
test: /\.(png|svg|jpg|gif)$/,
use: ["file-loader"]
},
{
test: /.html$/, //所有html结尾的文件添加此 loader 处理
use: ["html-withimg-loader"]
},
]
},
3.在html文件中使用<img src=" ">
路径引入即可
<img src="../myImages/11.png" alt="">