1. 首頁 > 生活百科 > >

vue中動態引入圖片為什么要是require， 你不知道的那些事

生活百科

相信用過vue的小伙伴 ， 肯定被面試官問過這樣一個問題：在vue中動態的引入圖片為什么要使用require
有些小伙伴，可能會輕蔑一笑：呵，就這，因為動態添加src被當做靜態資源處理了 ， 沒有進行編譯，所以要加上require， 我倒著都能背出來......
emmm...乍一看好像說的很有道理??，但视H邢敢豢? ，這句話說的到底是個啥？針對上面的回答，我不禁有如下幾個疑問：

  1. 什么是靜態資源？
  2. 為什么動態添加的src會被當做的靜態的資源？
  3. 沒有進行編譯，是指為是什么沒有被編譯？
  4. 加上require為什么能正確的引入資源，是因為加上require就能編譯了？
當我產生最后一個疑問的時候 ， 發現上面的答案看似說了些啥，但好像又什么都沒說...... 如果各位看官老爺也有如上幾個疑問，那就讓我給大家一一解惑
1.什么是靜態資源與靜態資源相對應的還有一個動態資源，先讓我們看看網上的各位大佬們怎么解釋的 。
靜態資源：一般客戶端發送請求到web服務器，web服務器從內存在取到相應的文件，返回給客戶端，客戶端解析并渲染顯示出來 。
動態資源：一般客戶端請求的動態資源 ， 先將請求交于web容器，web容器連接數據庫，數據庫處理數據之后，將內容交給web服務器，web服務器返回給客戶端解析渲染處理 。
其實上面的總結已經很清晰了 。站在一個vue項目的角度，我們可以簡單的理解為：
靜態資源就是直接存放在項目中的資源，這些資源不需要我們發送專門的請求進行獲取 。比如assets目錄下面的圖片，視頻，音頻 ， 字體文件，css樣式表等 。
動態資源就是需要發送請求獲取到的資源 。比如我們刷淘寶的時候，不同的商品信息是發送的專門的請求獲取到的，就可以稱之為動態資源 。
2.為什么動態添加的src會被當做的靜態的資源？回答這個問題之前，我們需要了解一下，瀏覽器是怎么能運行一個vue項目的 。
我們知道瀏覽器打開一個網頁，實際上運行的是html，css，js三種類型的文件 。當我們本地啟動一個vue項目的時候，實際上是先將vue項目進行打包，打包的過程就是將項目中的一個個vue文件轉編譯成html，css，js文件的過程 ， 而后再在瀏覽器上運行的 。
那動態添加的src如果我們沒有使用require引入，最終會打包成什么樣子呢，我帶大家實驗一波 。
// vue文件中動態引入一張圖片<template><div class="home"><!-- 通過v-bind引入資源的方式就稱之為動態添加 --><img :src="'../assets/logo.png"" alt="logo"></div></template>//最終編譯的結果(瀏覽器上運行的結果)//這張圖片是無法被正確打開的<img src="https://www.huyubaike.com/assets/logo.png" alt="logo">我們可以看出 ， 動態添加的src最終會編譯成一個靜態的字符串地址 。程序運行的時候，會按照這個地址去項目目錄中引入資源 。而 去項目目錄中引入資源的這種方式，就是將該資源當成了靜態資源 。所以這也就回答了我們的問題2 。
看到這里估計就有小伙伴疑惑了，這個最終被編譯的地址有什么問題嗎？我項目中的圖片就是這個地址，為什么無法引入？別急，我們繼續往下看 。
3.沒有進行編譯，是指的是什么沒有被編譯？沒有進行編譯 。這半句話，就聽得很讓人懵逼了 。按照問題2我們知道這個動態引入的圖片最終是被編譯了，只是被編譯之后無法正確的引入圖片資源而已 。所以這句話本來就是錯的 。針對于我們的標準答案，我在這里進行改寫：
因為動態添加src被當做靜態資源處理了 ， 而被編譯過后的靜態路徑無法正確的引入資源 ， 所以要加上require
那這里就誕生了一個新的疑問：被編譯過后的靜態路徑為什么無法正確的引入資源？
想得到這個問題的答案，我們得先從正常的引入一張圖片開始 。在項目中我們靜態的引入一張圖片肯定是可以引入成功的，而引用圖片所在的vue文件肯定也是被編譯的，那靜態引入圖片最終會被編譯成什么樣呢，模擬一波：
// vue文件中靜態的引入一張圖片<template><div class="home"><!-- 直接引入圖片靜態地址，不再使用v-bind --><img src="https://www.huyubaike.com/assets/logo.png" alt="logo"></div></template>//最終編譯的結果//這張圖片是可以被正確打開的<img src="http://img.zhejianglong.com/231019/045R3M14-3.png" alt="logo">根據上面的測試，我們發現，使用靜態的地址去引入一張圖片，圖片的路徑和圖片的名稱已經發生了改變，并且編譯后過后的靜態地址是可以成功的引入資源的 。這是因為，在默認情況下，src目錄下面的所有文件都會被打包 ， src下面的圖片也會被打包在新的文件夾下并生成新的文件名 。編譯過后的靜態地址引入的是打包過后的圖片地址，從而可以正確的引用資源

推薦閱讀