前言：

成都創(chuàng)新互聯(lián)公司致力于互聯(lián)網(wǎng)網(wǎng)站建設(shè)與網(wǎng)站營銷，提供網(wǎng)站設(shè)計、成都網(wǎng)站設(shè)計、網(wǎng)站開發(fā)、seo優(yōu)化、網(wǎng)站排名、互聯(lián)網(wǎng)營銷、微信小程序定制開發(fā)、公眾號商城、等建站開發(fā)，成都創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)策劃專家，為不同類型的客戶提供良好的互聯(lián)網(wǎng)應(yīng)用定制解決方案，幫助客戶在新的全球化互聯(lián)網(wǎng)環(huán)境中保持優(yōu)勢。

本文演示了

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

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

為何要使用file-loader：

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

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

安裝file-loader

$ npm i -D file-loader

package.json目前配置：

配置webpack.config.js

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

我目前用的項目目錄：

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

編寫main.css

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

執(zhí)行 npm run build構(gòu)建項目。

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

執(zhí)行 npm run build構(gòu)建項目。

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

問題描述

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

const imageList = [
 {id:1,info:'中國銀行',uri:'./assets/1.jpg'},
 {id:2,info:'中國農(nóng)業(yè)銀行',uri:'./assets/2.jpg'},
 {id:3,info:'中國建設(shè)銀行',uri:'./assets/3.jpg'}
]

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

但是這樣做導(dǎo)致了圖片無法找到

發(fā)現(xiàn)請求圖片路徑出現(xiàn)了問題：所有圖片請求的路徑變成了當(dāng)前的url拼接uri

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

發(fā)現(xiàn)這是webpack引入圖片的方式

問題原因

Q1:這兩種方式的區(qū)別？

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

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

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

• 如果src的值以slash開頭那么會被認(rèn)為是以靜態(tài)文件為根目錄的絕對路徑
• 如果src的值不以slash開頭那么會被認(rèn)為是當(dāng)前路徑的相對路徑

總結(jié)為：靜態(tài)服務(wù)器可以被當(dāng)做文件系統(tǒng)看待，這些uri就是文件路徑

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

A2: 僅對于圖片的import:

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

打包位置：通過對file-loader的設(shè)置

{
test: /\.(jpg|png|svg|pdf)$/,
exclude: /font.*\.svg$/,
loader: 'file-loader?name=[path][name].[hash].[ext]'
}
//根據(jù)這樣的設(shè)置，webpack會將所有**使用到的圖片全部加載到當(dāng)前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: 首先先說明我發(fā)現(xiàn)的區(qū)別

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

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

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

總結(jié)：使用import或者require或者background都會被webpack的file-loader當(dāng)做依賴模塊處理：

• - 打包的時候執(zhí)行到引入部分（import。。。）
• - 將對應(yīng)的靜態(tài)文件打包到配置好的位置
• - 生成打包后的絕對路徑賦值給引入部分

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

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

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

其他知識

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

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

我的疑問：

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

我的解決方案

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

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

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

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

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

const BANK_LIST = {
 './bank-logo-6.png': {name: '中國銀行', id: 1},
 './bank-logo-7.png': {name: '中國建設(shè)銀行', id: 2},
 './bank-logo-8.png': {name: '興業(yè)銀行', 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"'}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

本文標(biāo)題：webpack之引入圖片的實現(xiàn)及問題
分享路徑：http://www.chinadenli.net/article48/iiegep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、手機網(wǎng)站建設(shè)、網(wǎng)站改版、企業(yè)建站、域名注冊、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)