角度2ロードCSSの背景画像資産フォルダから

マイフォルダ構造が私の家-page.component.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

のように見える私は実行すると、私は

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

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

を以下していますコード、私は次のように背景画像を変更した場合、私は全体の異なるERROを取得し、目的を実証するために

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

チェック。あなたは決してsrcフォルダにアクセスすべきではなく、とにかく実稼働ビルドでは利用できません。 – sandrooco

それは理にかなっています。しかし、distフォルダを参照すると、ng build -prodを実行するまでdistフォルダが存在しないため、エラーが表示されます。 – ErnieKev

あなたのdistのあなたのcssへのrefで相対パスを使用してください.. ../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画像はdistのフォルダに配置されている

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

出典

2018-02-20 17:27:50

角度2ロードCSSの背景画像資産フォルダから

答えて

関連する問題