離子2 scss文件中的圖像

Question

根據Where do Images go in IONIC 2和ionic changelog我應該把圖像放入src/assets/img。

這確實爲<img src="assets/img/...

工作但是，它在SCSS文件中引用的圖像不工作。因此，例如我可能有pages/login/login.html具有上述圖像和這樣的作品，但隨後pages/login/login.scss我：

border-image: url("assets/img/... 

基於一些調試，好像它試圖在CSS文件從www/build/assets加載圖像，但在HTML中爲www/assets。

有什麼我需要做的，以便在scss文件中正確加載圖像資源？

Answer 1

由於樣式表嵌套在傳統訪問頁面的目錄中，因此您必須在傳統工作目錄上方的目錄中引用圖像。

例如，要設置<div>標記（如<div class="cover"></div>）的背景圖像，您應在該頁面的.scss文件中實現以下內容。

.cover{ 
    background-image: url('../assets/img/bg.jpg'); 
} 

編輯： 上Github離子超級入門庫旨在向您展示一些頁面佈局和最佳實踐，爲您的離子2項目。

如果你看一看的.scss stylesheet for the landing/welcome page你可以看到，背景圖像被以同樣的方式引用與以下行：

 background: url('../assets/img/splashbg.png') no-repeat transparent;