溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這期內容當中小編將會給大家帶來有關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>
上述就是小編為大家分享的vue cli中怎么使用絕對路徑引用圖片了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
