大家好，我是前端隊長Daotin，想要獲取更多前端精彩內容，關注我(全網同名)，解鎖前端成長新姿勢。
以下正文：
今天遇到一個在vue檔案中引入本地圖片的問題，於是有了這篇文章。
通常，我們的一個img標籤在html中是這麼寫的：
<img src="../images/demo.png">
這種寫法只能引用相對路徑下的圖片。不能使用絕對路徑。使用絕對路徑的話，這類資源將會直接被拷貝，而不會經過 webpack 的處理。
如果src是變數的話，我們一般會在data中定一個變數src進行動態繫結。
<img :src="src">
//data中定義變數src
data() {
return {
src: '../images/demo.png'
}
}
然而這時候，會發現這個時候圖片並沒有被載入出來，圖片沒有顯示出來，通過檢視發現這張圖片的地址顯示 ../images/demo.png ，也就是說通過v-bind形式繫結的相對路徑不會被webpack的file-loader處理，只會做簡單的文字替換。
那怎麼辦呢？
解決方法
1、將圖片轉**base64**格式
<img src="data:image/png;base64,iVBYKIGloxxxxxxxxxxxxxxxxxxx...">
一般圖片比較小的可以這麼做，比如圖示icon等，大小一般在10KB以內的。
2、使用**import**引入圖片
<img :src="src">
//使用import引入
import img from '../images/demo.png'
//data中定義變數src
data() {
return {
src: img
}
}
3、使用**require**動態載入
<img :src="src">
//data中定義變數src
data() {
return {
src: require('../images/demo.png')
}
}
4、引入**publicPath**並且將其拼接在路徑中，實現引入路徑的動態變動
<img :src="publicPath + 'images/demo.jpg'" alt=""> // √
// 編譯後:
<img src="/foo/images/demo.jpg" alt="">
<script>
export default:{
data(){
return {
publicPath: process.env.BASE_URL,
}
},
}
</script>
在vue.config.js中配置publicPath路徑：
//vue.config.js
module.exports = {
publicPath:'/foo/',
...
}
結論
靜態資源可以通過兩種方式進行處理：
-
在 JavaScript
被匯入或在 template/CSS 中通過相對路徑被引用。這類引用會被 webpack 處理。 -
放置在
public目錄下或通過絕對路徑被引用。這類資源將會直接被拷貝，而不會經過 webpack 的處理。
原理
從相對路徑匯入
當你在 JavaScript、CSS 或 *.vue 檔案中使用相對路徑 (必須以 . 開頭) 引用一個靜態資源時，該資源將會被包含進入 webpack 的依賴圖中。
在其編譯過程中，所有諸如 <img src="...">、background: url(...) 和 CSS @import 的資源 URL 都會被解析為一個模組依賴。
用絕對路徑引入時，路徑讀取的是public資料夾中的資源，任何放置在 public 資料夾的靜態資源都會被簡單的複製到編譯後的目錄中，而不經過 webpack特殊處理。
當你的應用被部署在一個域名的根路徑上時，比如http://www.abc.com/，此時這種引入方式可以正常顯示但是如果你的應用沒有部署在域名的根部，那麼你需要為你的 URL 配置 publicPath 字首，publicPath 是部署應用包時的基本 URL，需要在 vue.config.js 中進行配置。
擴充套件
關於vue file-loader vs url-loader
如果我們希望在頁面引入圖片（包括img的src和background的url）。當我們基於webpack進行開發時，引入圖片會遇到一些問題。
其中一個就是引用路徑的問題。拿background樣式用url引入背景圖來說，我們都知道，webpack最終會將各個模組打包成一個檔案，因此我們樣式中的url路徑是相對入口html頁面的，而不是相對於原始css檔案所在的路徑的。這就會導致圖片引入失敗。這個問題是用
file-loader解決的，file-loader可以解析專案中的url引入（不僅限於css），根據我們的配置，將圖片拷貝到相應的路徑，再根據我們的配置，修改打包後檔案引用路徑，使之指向正確的檔案。
另外，如果圖片較多，會發很多http請求，會降低頁面效能。這個問題可以通過url-loader解決。url-loader會將引入的圖片編碼，生成dataURl。相當於把圖片資料翻譯成一串字元。再把這串字元打包到檔案中，最終只需要引入這個檔案就能訪問圖片了。當然，如果圖片較大，編碼會消耗效能。因此url-loader提供了一個limit引數，小於limit位元組的檔案會被轉為DataURl，大於limit的還會使用file-loader進行copy。
url-loader和file-loader是什麼關係呢？簡答地說，url-loader封裝了file-loader。url-loader不依賴於file-loader，即使用url-loader時，只需要安裝url-loader即可，不需要安裝file-loader，因為url-loader內建了file-loader。通過上面的介紹，我們可以看到，url-loader工作分兩種情況：1.檔案大小小於limit引數，url-loader將會把檔案轉為DataURL；2.檔案大小大於limit，url-loader會呼叫file-loader進行處理，引數也會直接傳給file-loader。因此我們只需要安裝url-loader即可。
原文連結：https://www.cnblogs.com/weizaiyes/p/7461967.html
關於background url引入圖片時
按照上面理論，如果我採用相對路徑的方式引入圖片的話，webpack會對其require處理。
background: url('./iphonexs.png') 0 0 no-repeat;
實際上確實如此，我看到頁面的背景變成：
background: url(/resources/dist/images/iphonexs.a25bee7.png) 0 0 no-repeat;
這是根據url-loader的配置處理的結果。
或者採用動態style的方式：
<div
:style="{'background': 'url(' + require('./iphonexs.png') + ') 0 0 no-repeat'}">
</div>
Reference
（完）
如果有問題可以幫我指出，感謝！
--- End ---
你好，我是前端隊長Daotin，專注分享前端與認知。希望在這裡，和你分享我的前端學習和工作經驗，記錄個人成長。
想要獲取更多前端精彩內容，關注我(全網同名)，解鎖前端成長新姿勢。