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.在導(dǎo)入的index.js文件中引入圖片（file-loder會在內(nèi)存生成一張圖片 到 dist 目錄下，生成圖片的地址以logo）

import './index.css';
import logo from './22.jpg';   //返回的結(jié)果 logo 是一個新的圖片的地址

let image=new Image();  //創(chuàng)建新的圖片對象

image.src=logo;      //就是一個普通的字符串

// 將new 的圖片插入到body 的后面
document.body.appendChild(image);

3.nom run dev運行得到結(jié)果：

小老弟.png

關(guān)于url-loader：當(dāng)圖片小于 options中設(shè)置的limit使用 base64 轉(zhuǎn)碼圖片減少請求

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結(jié)尾的文件添加此 loader 處理
            use: ["html-withimg-loader"]
           },
        ]
    },

3.在html文件中使用<img src=" ">路徑引入即可

 <img src="../myImages/11.png" alt="">