這篇文章主要講解了“vue動(dòng)態(tài)引入圖片要使用require的原因是什么”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“vue動(dòng)態(tài)引入圖片要使用require的原因是什么”吧！

創(chuàng)新互聯(lián)專注于費(fèi)縣企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,成都做商城網(wǎng)站。費(fèi)縣網(wǎng)站建設(shè)公司,為費(fèi)縣等地區(qū)提供建站服務(wù)。全流程按需求定制設(shè)計(jì)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

1.什么是靜態(tài)資源

與靜態(tài)資源相對(duì)應(yīng)的還有一個(gè)動(dòng)態(tài)資源，先讓我們看看網(wǎng)上的各位大佬們?cè)趺唇忉尩摹?/p>

靜態(tài)資源：一般客戶端發(fā)送請(qǐng)求到web服務(wù)器，web服務(wù)器從內(nèi)存在取到相應(yīng)的文件，返回給客戶端，客戶端解析并渲染顯示出來(lái)。

動(dòng)態(tài)資源：一般客戶端請(qǐng)求的動(dòng)態(tài)資源，先將請(qǐng)求交于web容器，web容器連接數(shù)據(jù)庫(kù)，數(shù)據(jù)庫(kù)處理數(shù)據(jù)之后，將內(nèi)容交給web服務(wù)器，web服務(wù)器返回給客戶端解析渲染處理。

其實(shí)上面的總結(jié)已經(jīng)很清晰了。站在一個(gè)vue項(xiàng)目的角度，我們可以簡(jiǎn)單的理解為：

靜態(tài)資源就是直接存放在項(xiàng)目中的資源，這些資源不需要我們發(fā)送專門的請(qǐng)求進(jìn)行獲取。比如assets目錄下面的圖片，視頻，音頻，字體文件，css樣式表等。

動(dòng)態(tài)資源就是需要發(fā)送請(qǐng)求獲取到的資源。比如我們刷淘寶的時(shí)候，不同的商品信息是發(fā)送的專門的請(qǐng)求獲取到的，就可以稱之為動(dòng)態(tài)資源。

2.  為什么動(dòng)態(tài)添加的src會(huì)被當(dāng)做的靜態(tài)的資源？

回答這個(gè)問(wèn)題之前，我們需要了解一下，瀏覽器是怎么能運(yùn)行一個(gè)vue項(xiàng)目的。

我們知道瀏覽器打開一個(gè)網(wǎng)頁(yè)，實(shí)際上運(yùn)行的是html，css，js三種類型的文件。當(dāng)我們本地啟動(dòng)一個(gè)vue項(xiàng)目的時(shí)候，實(shí)際上是先將vue項(xiàng)目進(jìn)行打包，打包的過(guò)程就是將項(xiàng)目中的一個(gè)個(gè)vue文件轉(zhuǎn)編譯成html，css，js文件的過(guò)程，而后再在瀏覽器上運(yùn)行的。

那動(dòng)態(tài)添加的src如果我們沒(méi)有使用require引入，最終會(huì)打包成什么樣子呢，我?guī)Т蠹覍?shí)驗(yàn)一波。

// vue文件中動(dòng)態(tài)引入一張圖片


//最終編譯的結(jié)果(瀏覽器上運(yùn)行的結(jié)果)
//這張圖片是無(wú)法被正確打開的

我們可以看出，動(dòng)態(tài)添加的src最終會(huì)編譯成一個(gè)靜態(tài)的字符串地址。程序運(yùn)行的時(shí)候，會(huì)按照這個(gè)地址去項(xiàng)目目錄中引入資源。而 去項(xiàng)目目錄中引入資源的這種方式，就是將該資源當(dāng)成了靜態(tài)資源。所以這也就回答了我們的問(wèn)題2。

看到這里估計(jì)就有小伙伴疑惑了，這個(gè)最終被編譯的地址有什么問(wèn)題嗎？我項(xiàng)目中的圖片就是這個(gè)地址，為什么無(wú)法引入？別急，我們繼續(xù)往下看。

3.  沒(méi)有進(jìn)行編譯，是指的是什么沒(méi)有被編譯？

沒(méi)有進(jìn)行編譯。這半句話，就聽得很讓人懵逼了。按照問(wèn)題2我們知道這個(gè)動(dòng)態(tài)引入的圖片最終是被編譯了，只是被編譯之后無(wú)法正確的引入圖片資源而已。所以這句話本來(lái)就是錯(cuò)的。針對(duì)于我們的標(biāo)準(zhǔn)答案，我在這里進(jìn)行改寫：

因?yàn)閯?dòng)態(tài)添加src被當(dāng)做靜態(tài)資源處理了，而被編譯過(guò)后的靜態(tài)路徑無(wú)法正確的引入資源，所以要加上require

那這里就誕生了一個(gè)新的疑問(wèn)：被編譯過(guò)后的靜態(tài)路徑為什么無(wú)法正確的引入資源？

想得到這個(gè)問(wèn)題的答案，我們得先從正常的引入一張圖片開始。在項(xiàng)目中我們靜態(tài)的引入一張圖片肯定是可以引入成功的，而引用圖片所在的vue文件肯定也是被編譯的，那靜態(tài)引入圖片最終會(huì)被編譯成什么樣呢，模擬一波：

// vue文件中靜態(tài)的引入一張圖片


//最終編譯的結(jié)果
//這張圖片是可以被正確打開的

根據(jù)上面的測(cè)試，我們發(fā)現(xiàn)，使用靜態(tài)的地址去引入一張圖片，圖片的路徑和圖片的名稱已經(jīng)發(fā)生了改變，并且編譯后過(guò)后的靜態(tài)地址是可以成功的引入資源的。這是因?yàn)?，在默認(rèn)情況下，src目錄下面的所有文件都會(huì)被打包，src下面的圖片也會(huì)被打包在新的文件夾下并生成新的文件名。編譯過(guò)后的靜態(tài)地址引入的是打包過(guò)后的圖片地址，從而可以正確的引用資源

事實(shí)確實(shí)是這樣嗎？我們可以執(zhí)行打包命令（npm run build）進(jìn)行驗(yàn)證

可以發(fā)現(xiàn)，編譯過(guò)后的靜態(tài)地址確實(shí)是和dist下編譯后圖片地址是一致的，從而驗(yàn)證我們的想法。

到這里我們其實(shí)就可以解釋上面的問(wèn)題了：動(dòng)態(tài)添加的src，被編譯過(guò)后的靜態(tài)路徑為什么無(wú)法正確的引入資源？

因?yàn)閯?dòng)態(tài)的添加的src編譯過(guò)后的地址，與圖片資源編譯過(guò)后的資源地址不一致， 導(dǎo)致無(wú)法正確的引入資源

  編譯過(guò)后的src地址：../assets/logo.png
  編譯過(guò)后的圖片資源地址：/img/logo.6c137b82.png

那要怎么解決上述的問(wèn)題呢，答案就是：require

4.  加上require為什么能正確的引入資源，是因?yàn)榧由蟫equire就能編譯了？

針對(duì)這個(gè)問(wèn)題，首先就要否定后半句，無(wú)論加不加require，vue文件中引入一張圖片都會(huì)被編譯。

接著我們?cè)賮?lái)好好了解一下，require。

4.1 require是什么: 是一個(gè)node方法，用于引入模塊，JSON或本地文件

4.2 調(diào)用require方法引入一張圖片之后發(fā)生了什么：

在回答這個(gè)問(wèn)題之前，容我先對(duì)問(wèn)題3中的內(nèi)容進(jìn)行一定的補(bǔ)充。其實(shí)如果真的有小伙伴跟著問(wèn)題三中的操作進(jìn)行驗(yàn)證，估計(jì)就要開噴了：為什么我靜態(tài)引入的圖片最終編譯的地址和你的不一樣，是個(gè)base64，而且打包之后dist下面也沒(méi)有生成新的圖片。大概就是下面這樣的情況。

// vue文件中靜態(tài)的引入一張圖片


//最終編譯的結(jié)果
//這張圖片是可以被正確打開的

先別急著噴，實(shí)際上造成這種差異的原因，是因?yàn)槲腋牧艘幌聎ebpack中的配置。接下來(lái)涉及少量webpack代碼，不了解webpack的小伙伴也沒(méi)關(guān)系，了解原理即可。

在上文中的我們提到，vue項(xiàng)目最終會(huì)被打包成一個(gè)dist目錄，那么是什么幫我們完成這個(gè)打包的呢，沒(méi)錯(cuò)，就是webpack。在vue項(xiàng)目中的引入一張圖片的時(shí)候，細(xì)心的同學(xué)會(huì)發(fā)現(xiàn)，有的時(shí)候，瀏覽器上顯示圖片地址是一個(gè)base64，有的時(shí)候，是一個(gè)被編譯過(guò)后的文件地址。也就是上述描述的差異。

之所以會(huì)造成這種差異，是webpack打包的時(shí)候，對(duì)圖片資源進(jìn)行了相關(guān)的配置。我們可以通過(guò)如下命令生成vue項(xiàng)目中的webpack配置文件，進(jìn)行驗(yàn)證：

npx vue-cli-service inspect --mode development >> webpack.config.development.js

上圖就是vue中webpack默認(rèn)的圖片打包規(guī)則。設(shè)置 type: 'asset'，默認(rèn)的，對(duì)于小于8k的圖片，會(huì)將圖片轉(zhuǎn)成base64 直接插入圖片，不會(huì)再在dist目錄生成新圖片。對(duì)于大于8k的圖片，會(huì)打包進(jìn)dist目錄，之后將新圖片地址返回給src。

而我在上述測(cè)試中使用的圖片，是vue-cli自帶的一張logo圖片，大小是6.69k。按照默認(rèn)的打包規(guī)則，是會(huì)轉(zhuǎn)成base64，嵌入圖片中的。所以為了講述方便，我在vue.config.js中修改了其默認(rèn)的配置，配置如下：

module.exports = {
    // 使用configureWebpack對(duì)象，下面可以直接按照webpack中的寫法進(jìn)行編寫
    // 編寫的內(nèi)容，最終會(huì)被webpack-merge插件合并到webpack.config.js主配置文件中
  configureWebpack: { 
    module: {
      rules: [
        {
          test: /\.(png|jpe?g|gif|webp|avif)(\?.*)?$/,
          type: 'asset',
          parser: {
            dataUrlCondition: {
             // 這里我將默認(rèn)的大小限制改成6k。
              // 當(dāng)圖片小于6k時(shí)候，使用base64引入圖片；大于6k時(shí)，打包到dist目錄下再進(jìn)行引入
              maxSize: 1024 * 6
            }
          }
        }
      ]
    }
  }
}

那上面說(shuō)了這么多，和require有啥關(guān)系，自然是有滴。

我們現(xiàn)在知道vue最終是通過(guò)webpack打包，并且會(huì)在webpack配置文件中編寫一系列打包規(guī)則。而webpack中的打包規(guī)則，針對(duì)的其實(shí)是一個(gè)一個(gè)模塊，換而言之webpack只會(huì)對(duì)模塊進(jìn)行打包。那webpack怎么將圖片當(dāng)成一個(gè)模塊呢，這就要用到我們的正主require。

當(dāng)我們使用require方法引入一張圖片的時(shí)候，webpack會(huì)將這張圖片當(dāng)成一個(gè)模塊，并根據(jù)配置文件中的規(guī)則進(jìn)行打包。我們可以將require當(dāng)成一個(gè)橋梁，使用了require方法引入的資源，該資源就會(huì)當(dāng)成模塊并根據(jù)配置文件進(jìn)行打包，并返回最終的打包結(jié)果。

回到問(wèn)題4.2：調(diào)用require方法引入一張圖片之后發(fā)生了什么

1.如果這張圖片小于項(xiàng)目中設(shè)置的資源限制大小，則會(huì)返回圖片的base64插入到require方法的調(diào)用處

2.如果這張圖片大于項(xiàng)目中設(shè)置的資源限制大小，則會(huì)將這個(gè)圖片編譯成一個(gè)新的圖片資源。require方法返回新的圖片資源路徑及文件名

回到問(wèn)題4：為什么加上require能正確的引入資源

因?yàn)橥ㄟ^(guò)require方法拿到的文件地址，是資源文件編譯過(guò)后的文件地址（dist下生成的文件或base64文件），因此可以找對(duì)應(yīng)的文件，從而成功引入資源。

答案就是這么簡(jiǎn)單，來(lái)驗(yàn)證一波

// vue文件中使用require動(dòng)態(tài)的引入一張圖片


//最終編譯的結(jié)果
//這張圖片是可以被正確打開的

有問(wèn)題嗎，沒(méi)有問(wèn)題。到這里，不妨再對(duì)我們的標(biāo)準(zhǔn)答案進(jìn)行一次優(yōu)化：

因?yàn)閯?dòng)態(tài)添加的src，編譯過(guò)后的文件地址和被編譯過(guò)后的資源文件地址不一致，從而無(wú)法正確引入資源。而使用require，返回的就是資源文件被編譯后的文件地址，從而可以正確的引入資源

看到這，估計(jì)還是有一些小伙伴有一些疑問(wèn)，我再擴(kuò)展一波：

6. 問(wèn)題3中，靜態(tài)的引入一張圖片，沒(méi)有使用require，為什么返回的依然是編譯過(guò)后的文件地址？

答：在webpack編譯的vue文件的時(shí)候，遇見src等屬性會(huì)默認(rèn)的使用require引入資源路徑。引用vue-cli官方的一段原話

當(dāng)你在 JavaScript、CSS 或 *.vue 文件中使用相對(duì)路徑 (必須以 . 開頭) 引用一個(gè)靜態(tài)資源時(shí)，該資源將會(huì)被包含進(jìn)入 webpack 的依賴圖中。在其編譯過(guò)程中，所有諸如 、background: url(...) 和 CSS @import 的資源 URL 都會(huì)被解析為一個(gè)模塊依賴。

例如，url(./image.png) 會(huì)被翻譯為 require('./image.png')，而：

將會(huì)被編譯到：

h('img', { attrs: { src: require('./image.png') }})

7. 按照問(wèn)題6中所說(shuō)，那么動(dòng)態(tài)添加src的時(shí)候也會(huì)使用require引入，為什么src編譯過(guò)后的地址，與圖片資源編譯過(guò)后的資源地址不一致

答：因?yàn)閯?dòng)態(tài)引入一張圖片的時(shí)候，src后面的屬性值，實(shí)際上是一個(gè)變量。webpack會(huì)根據(jù)v-bind指令去解析src后面的屬性值。并不會(huì)通過(guò)reuqire引入資源路徑。這也是為什么需要手動(dòng)的添加require。

8.據(jù)說(shuō)public下面的文件不會(huì)被編譯，那我們使用靜態(tài)路徑去引入資源的時(shí)候，也會(huì)默認(rèn)的使用require引入嗎？

官方的原文是這樣子的：

任何放置在 public 文件夾的靜態(tài)資源都會(huì)被簡(jiǎn)單的復(fù)制，而不經(jīng)過(guò) webpack。你需要通過(guò)絕對(duì)路徑來(lái)引用它們。

答：不會(huì)，使用require引入資源的前提的該資源是webpack解析的模塊，而public下的文件壓根就不會(huì)走編譯，也就不會(huì)使用到require。

9.為什么使用public下的資源一定要絕對(duì)路徑

答：因?yàn)殡m然public文件不會(huì)被編譯，但是src下的文件都會(huì)被編譯。由于引入的是public下的資源，不會(huì)走require，會(huì)直接返回代碼中的定義的文件地址，該地址無(wú)法在編譯后的文件目錄（dist目錄）下找到對(duì)應(yīng)的文件，會(huì)導(dǎo)致引入資源失敗。

10.上文件中提到的webpack，為什么引入資源的時(shí)候要有base64和打包到dist目錄下兩種的方式，全部打包到的dist目錄下，他不香嗎？

答：為了減少http請(qǐng)求。頁(yè)面中通過(guò)路徑引入的圖片，實(shí)際上都會(huì)向服務(wù)器發(fā)送一個(gè)請(qǐng)求拿到這張圖片。對(duì)于資源較小的文件，設(shè)置成base64，既可以減少請(qǐng)求，也不會(huì)影響到頁(yè)面的加載性能。

vue是什么

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫(kù)只關(guān)注視圖層，方便與第三方庫(kù)和項(xiàng)目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫(kù)開發(fā)復(fù)雜的單頁(yè)應(yīng)用。

感謝各位的閱讀，以上就是“vue動(dòng)態(tài)引入圖片要使用require的原因是什么”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)vue動(dòng)態(tài)引入圖片要使用require的原因是什么這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！