vue cli 關於使用絕對路徑引用圖片的問題

zeki發表於2017-12-05
Vue

在頁面中使用絕對路徑可通過在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>

相關文章