前言

Vue是什么，是一套構建用戶界面的漸進式框架（官網解釋），什么叫漸進式框架呢，簡單回答就是主張最少，這些概念只能自己去看，自己去理解，一千個讀者一千個哈姆雷特，不過多的解釋。Vue官方文檔 很全面的。

Vue是近兩年來比較火的一個前端框架（漸進式框架吧），本文將給大家詳細介紹vue cli使用絕對路徑引用圖片問題的相關內容，分享出來供大家參考學習，下面話不多說了，來一起看看吧。

正文：

在頁面中使用絕對路徑可通過在js中用 require() 引入

data (){ return {  src: require('IMAGES/banner.jpg') }}

<img :src="src">

樣式里面似乎無法使用絕對路徑，除非把圖片資源都放到static里面，然后就可以這樣引用

background: url("/static/images/banner.jpg") no-repeat;

但，放到static里面webpack打包后只會把資源復制到發布目錄而不會把小圖片優化為base64。

為了兼顧可以把圖片資源優化，所以還是不適合把圖片資源放到static，但，在vue頁面style標簽里面寫樣式隨著目錄的深入有可能引用路徑是：

background: url("../../../images/banner.jpg") no-repeat;

有個做法似乎可以省去一些麻煩：

把樣式文件統一放到style文件夾里面，樣式圖片資源用相對路徑，然后在style標簽用src屬性引入樣式，這樣就可以避免太多層的返回了~~~

── src ── images  ── banner.jpg ── style  ── index.scss

/*style*/background: url("../images/banner.jpg") no-repeat;

<style src="STYLE/index" lang="scss"></style>

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。