角CLI：CSS不從資產

加載圖像我在我的項目在這個目錄。該應用程序工作正常，我刪除下面結構中的任何不相關的目錄。角CLI：CSS不從資產

e2e 
node_modules 
src 
|--app 
     |--app.component.css <--Image is not loaded at all 
     |--app.component.ts 
     |--app.component.html <--Html can load image correctly 
|--assets 
     |--images 
      |--play.png  <--What I want in css 
.angular-cli.json

據證實，我可以通過使用此語法加載從HTML文件中的圖像：

HTML file

<img src="/assets/images/play.png" alt=""> 

<!-- This will load image from css --> 
<div class="sample-image"></div>

CSS file

.sample-image { 
    /* Not working at all*/ 
    /* Url I've tried: /assets, ../assets, ./assets, ../images */ 
    background-image: url(/assets/images/play.png); 
    background-color: #cccccc; 
    width: 200px; 
    height: 100px; 
}

我可以告訴在圖像應該加載，因爲我把背景顏色顯示它應該在哪裏。

我已檢查Github page，看它是否是相關的，但使用ng serve它似乎不是爲我工作，甚至在發展。我還沒有嘗試過構建它。

UPDATE：我很抱歉描繪錯誤的目錄結構，我的目光集中在src文件夾，我忘記了應用程序和資產是在src。我已經更新了它。

UPDATE 2：這裏是一個angular-cli json文件。我沒有被篡改，因爲我記得當我創建的項目，ng命令：

"apps": [ 
    { 
     "root": "src", 
     "outDir": "dist", 
     "assets": [ 
     "assets", 
     "favicon.ico" 
     ], 
     "index": "index.html", 
     "main": "main.ts", 
     "polyfills": "polyfills.ts", 
     "test": "test.ts", 
     "tsconfig": "tsconfig.app.json", 
     "testTsconfig": "tsconfig.spec.json", 
     "prefix": "app", 
     "styles": [ 
     "styles.css" 
     ], 
     "scripts": [], 
     "environmentSource": "environments/environment.ts", 
     "environments": { 
     "dev": "environments/environment.ts", 
     "prod": "environments/environment.prod.ts" 
     } 
    } 
    ],

來源

2017-07-17 Mohd.Zafranudin

其''/ assets/image/play.png'，你把'/ assets/images/play.png'放到你的CSS中，image url路徑與你的文件夾樹相比是錯誤的。 – nCore

對不起，我更新了目錄名。我確認文件夾的名稱是'images' –

嘗試使用./assets/image/play.png –

看一看的angular-cli.json配置

{ 
    "root": "src", 
    "outDir": "dist", 
    "assets": [ 
    "assets", 
    "favicon.ico" 
    ], 
    .... 
}

你有SRC作爲根文件夾，您資產文件夾是應用內。移動src中的assets文件夾。

更新1：基於新的目錄結構

在你的src網址

<img src="assets/images/play.png" alt="">

來源

2017-07-17 09:29:25 Aravind

對不起，我描述了一個錯誤的目錄結構。請檢查更新的一個 –

刪除/在資產面前似乎什麼事情都工作正常，除了一個愚蠢的錯誤。

圖像本身。

play.png

應該已經檢查圖像我做任何事情之前。轉出的圖像是比我在CSS，它在返回示出了圖像的transparent area指定的寬度大。

更改爲其他圖像幫助我找到這個問題。

來源

2017-07-17 11:16:48

在app.component.css中，使用圖像的相對url。對於給定的場景，請將css設置如下：

.sample-image { 
    background-image: url('../assets/images/play.png'); 
    background-color: #cccccc; 
    width: 200px; 
    height: 100px; 
}

請不要忘記url中的引號。

來源

2017-07-17 11:23:59

角CLI：CSS不從資產

回答

相關問題