鍍金池/ 問答/HTML/ .vue 文件中的style中如何正確引入assets中的圖片

.vue 文件中的style中如何正確引入assets中的圖片

在.vue 文件中的style中的css中想引入assets文件夾中的圖片資源，總是報錯
這是某個vue組件中style中的css，我這樣根據(jù)相對路徑就是獲取不到圖片資源

 .active {
          background: #111c24 url('../../assets/icon/login_active.png') no-repeat center;
        }
回答
編輯回答
大濕胸

其實完全沒必要將圖片放在src/assets里面，這是一個坑，你那里報錯應該是webpack里面配置的問題。

推薦的圖片存放方式
1 如果圖片小于8k（webpack配置里設置壓縮大?。?，會被壓縮成base64格式，建議直接放在這個組件同級目錄

background-image: url(./img/icon-1.png);

2 如果圖片比較大，可放在項目根目錄的public/images里面，統(tǒng)一管理

background-image: url(/images/banner.png);
2017年12月22日 13:50
編輯回答
綰青絲

建議題主設置一個webpack的路徑別名webpack.base.conf.js中

resolve: {
    alias: {
        '@src': path.resolve(__dirname, '../src/assets')
    }
}

然后使用的時候

 .active {
          background: #111c24 url('~@src/icon/login_active.png') no-repeat center;
}

@src就可以準確的定位到assets目錄了，同時也省去了各種..的寫法，簡單明了。

2018年3月4日 08:51
編輯回答
好難瘦

開發(fā)模式下，圖片地址就是相對當前的vue文件地址，生產(chǎn)模式下的圖片地址是在發(fā)布路徑下的。

2018年3月15日 22:52
編輯回答
尤禮

根據(jù)你的描述，圖片資源最好放到static文件夾，assets文件夾放的一般是最后會壓縮合并的資源，比如css文件，
在main.js文件中引用

import './assets/css/common.css'
2017年4月14日 00:19