角2加載CSS從資產文件夾背景圖像

我的文件夾結構看起來像角2加載CSS從資產文件夾背景圖像

-myapp 
    -assets 
     -home-page-img 
      -header-bg.jpg 
    -src 
     -app 
     -home-page 
      -home-page.component.css 
      -home-page.component.html 
      -home-page.component.ts

裏面我家page.component.css，我有以下

header { 
    width: 200px; 
    height: 200px; 
    background-image: url('/src/assets/home-page-img/header-bg.jpg'); 
} 

My angular-cli.json 
    "assets": [ 
    "assets", 
    "favicon.ico" 
]

當我運行代碼，我得到

GET http://localhost:4200/src/assets/home-page-img/header-bg.jpg 404 (Not Found)

爲了展示目的，如果我改變背景圖像下面，我得到一個完全不同的埃羅r

background-image: url('assets/home-page-img/header-bg.jpg'); 

./src/app/home-page/home-page.component.css 
Module not found: Error: Can't resolve './assets/home-page-img/header-bg.jpg' in '/Users/JohnSmith/Desktop/my-app/src/app/home-page'

如何獲取該圖像加載？

來源

2017-03-15 ErnieKev

檢查其中的圖片位於dist文件夾。你不應該訪問src文件夾，反正它在生產版本中不可用。 – sandrooco

這是有道理的。但是，如果我參考dist文件夾，它會給我一個錯誤，因爲dist文件夾不存在，直到我運行構建 - 生產。 – ErnieKev

使用相對路徑引用您的css在你的dist ..試試../assets/home-page-img/header-bg.jpg。多數民衆贊成在我的離子2項目對我有用.. –

嘗試background-image: url('../../assets/home-page-img/header-bg.jpg');

來源

2017-03-15 07:24:18 Thyagu

我使用它。始終以CSS和HTML「assets /」中的「/ assets /」開頭。我沒有問題。 Angular認識到它。

CSS

.descriptionModal{ 
    background-image: url("/assets/img/bg-compra.svg"); 
}

HTML

<img src="assets/img/ic-logoembajador-horizontal.svg" alt="logoEmbajador">

來源

2018-02-20 17:27:50

角2加載CSS從資產文件夾背景圖像

回答

相關問題