webpack之引入圖片的實現及問題

前言：

本文演示了

1. webpack如何在css文件中引入圖片；
2. webpack如何在html中引入圖片；

需要安裝配置的loader: file-loader;

為何要使用file-loader：

如果我們希望在頁面引入圖片（包括img的src和background的url）。當我們基于webpack進行開發時，引入圖片會遇到一些問題。

其中一個就是引用路徑的問題。拿background樣式用url引入背景圖來說，我們都知道，webpack最終會將各個模塊打包成一個文件，因此我們樣式中的url路徑是相對入口html頁面的，而不是相對于原始css文件所在的路徑的。這就會導致圖片引入失敗。這個問題是用file-loader解決的，file-loader可以解析項目中的url引入（不僅限于css），根據我們的配置，將圖片拷貝到相應的路徑，再根據我們的配置，修改打包后文件引用路徑，使之指向正確的文件。

安裝file-loader

$ npm i -D file-loader

package.json目前配置：

配置webpack.config.js

在common下新增img文件夾,并添加圖片dog.jpeg。

我目前用的項目目錄：

示例一、在css中引入我們的圖片

編寫main.css

在我們的app.js中引入main.css

執行 npm run build構建項目。

示例二、在html中引入圖片：重新編輯我們的app.js

執行 npm run build構建項目。

PS:webpack和圖片引入的一些問題

問題描述

• 需要使用<img>標簽引入多個圖片
• 理想方案是將圖片的相關信息（圖片文字，圖片相對路徑）整合到一個數組imageList
• 然后對imageList做一個map render出圖片列表

const imageList = [
 {id:1,info:'中國銀行',uri:'./assets/1.jpg'},
 {id:2,info:'中國農業銀行',uri:'./assets/2.jpg'},
 {id:3,info:'中國建設銀行',uri:'./assets/3.jpg'}
]

imageList.map((img)=>{
  return (
  <div>
   {img.info}
   <img src={img.uri} />
  </div>
  )
})

但是這樣做導致了圖片無法找到

發現請求圖片路徑出現了問題：所有圖片請求的路徑變成了當前的url拼接uri

換成import image from './assets/1.jpg'將image給src就可以拿到圖片

發現這是webpack引入圖片的方式

問題原因

Q1:這兩種方式的區別？

A2:主要是資源路徑的不同

1. 賦給src相對路徑：導致資源請求的路徑變成：當前url+src的值
2. 賦給src import的文件：首先使用import可以返回一個字符串這個字符串是文件被打包之后（在靜態目錄下）的絕對路徑。因此當前請求圖片的路徑就會變成：端口號+import的值
   

最后請求圖片的路徑很好解釋：

• 如果src的值以slash開頭那么會被認為是以靜態文件為根目錄的絕對路徑
• 如果src的值不以slash開頭那么會被認為是當前路徑的相對路徑

總結為：靜態服務器可以被當做文件系統看待，這些uri就是文件路徑

Q2:圖片是如何被webpack打包的？

A2: 僅對于圖片的import:

打包時機：在項目中的圖片并不是都會被打包的，經過嘗試發現通過import或者background:url(image path)引入的圖片才會被打包

打包位置：通過對file-loader的設置

{
test: /\.(jpg|png|svg|pdf)$/,
exclude: /font.*\.svg$/,
loader: 'file-loader?name=[path][name].[hash].[ext]'
}
//根據這樣的設置，webpack會將所有**使用到的圖片全部加載到當前path并且名字不變但是加上.hash.后綴**

Q3: img src的值可以是什么？background：url的值又可以是什么？

A3:

img src:

1. 路徑（url）
2. require（或者import的值）
3. data url（base64）

background：url：

1. 路徑（相對）
2. data url（base64）

Q4:為什么在css中使用background-url（）可以使用圖片的相對路徑但是在js文件中就不能使用相對路徑賦值給src？

A4: 首先先說明我發現的區別

1. src：會發請求，請求靜態的外部文件資源（只要是src不論值是什么（除base64）都會發送請求）
2. css background：不會發送請求

webpack對他們的處理方式也完全不同：

• - src：url ：不會被webpack處理
• - src：require（）：會被webpack處理
• - background：url：會被webpack處理

總結：使用import或者require或者background都會被webpack的file-loader當做依賴模塊處理：

• - 打包的時候執行到引入部分（import。。。）
• - 將對應的靜態文件打包到配置好的位置
• - 生成打包后的絕對路徑賦值給引入部分

Q5:客戶端圖片引入的方式有幾種？他們分別有什么不同的原理？

A5:所謂客戶端圖片：就是不想通過http請求的方式獲取的圖片

• 通過background:url('./****')
• 通過background:url(圖片base64)
• 通過src=圖片base64
• 通過src=require('./******')

其他知識

K1:到今天終于明白file-loader的作用

當其他模塊需要引用文件，file-loader就將對應文件依照name屬性要求的文件路徑和文件名進行打包。通過計算文件大小，小于limit的值，就將文件轉成base64賦給需要這些文件的位置，大于limit的值就將文件的打包后路徑賦給需要這些文件的位置

我的疑問：

網上有~說是作為src值的開頭可以將這部分的請求作為依賴模塊處理但是我沒有嘗試成功

我的解決方案

• 由于我還不知道該如何給background-url編程循環引入圖片所以我決定采用：
• 因此我采用編寫一個對象數組，對對象數組進行map，return<img src={require(bank.img+'')}>

const BANK_LIST = [
 {name: '中國銀行', img: './assets/bank-logo-6.png', id: 1},
 {name: '中國建設銀行', img: './assets/bank-logo-7.png', id: 2},
 {name: '興業銀行', img: './assets/bank-logo-8.png', id: 3}
]

BANK_LIST.map((bank)=>{
  return (
    <img src={require(bank.img+'')} />
  )
})

我的另外一種解決方案（由于項目中的eslint要求不支持動態引入文件）

使用webpack帶的require.context('pathToDirectory')他可以循環的將一個目錄下的所有文件引入

const BANK_LIST = {
 './bank-logo-6.png': {name: '中國銀行', id: 1},
 './bank-logo-7.png': {name: '中國建設銀行', id: 2},
 './bank-logo-8.png': {name: '興業銀行', id: 3}
 }

 const pathToImages = require.context('./assets');
 const originalBankList = pathToImages.keys().map((key) => {
 return Object.assign({}, BANK_LIST[key], {url: pathToImages(key)})
 });
 
//這時候originalBankList的每一項會變成
{name: '中國銀行', id: 1，url: "/app/src/containers/WisePort/CheckoutCounterContai…/bank-logo-1.9f949c516315756e18c0cb7d572f4d2c.png"'}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。