pain2.jpg
三種方法：
一沦辙、在js 中創(chuàng)建圖片來引入
二夫植、在css中引入background('url')
三、<img src=" " alt=" ">
1.在js創(chuàng)建圖片引入
1.安裝yarn add file-loader -D 安裝依賴油讯，并配置webpack.config.js規(guī)則：
2.在導入的index.js文件中引入圖片（file-loder會在內存生成一張圖片 到 dist 目錄下详民，生成圖片的地址以logo）
import './index.css';
import logo from './22.jpg'; //返回的結果 logo 是一個新的圖片的地址
let image=new Image(); //創(chuàng)建新的圖片對象
image.src=logo; //就是一個普通的字符串
// 將new 的圖片插入到body 的后面
document.body.appendChild(image);
3.nom run dev運行得到結果：
小老弟.png
關于url-loader：當圖片小于 options中設置的limit使用 base64 轉碼圖片減少請求
2.在css中引入（第一步存在可略過）
1.安裝yarn add file-loader -D 安裝依賴，并配置webpack.config.js規(guī)則：
module:{
rules:[ //規(guī)則
{ //使用 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成功
pain.png
3.使用<img src=" " alt=" ">
1.安裝loader:yarn add html-withimg-loader -D
2.webpack.config.js添加配置
module:{
rules:[ //規(guī)則
{
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="">
