web-dev-qa-db-ja.com

Angular 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

Home-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)

目的を示すために、背景画像を次のように変更すると、まったく異なるエラーが発生します

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'

その画像をロードするにはどうすればよいですか？

htmlcsscss3angular
20
ErnieKev

試してみる

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

私はそれを使用します。 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">
33
Samuel Ivan

background-image: url(/assets/images/foo.png)については、i18n + base-hrefに別の問題があり、最終的に 回避策 が見つかりました。

私の問題は以下によって解決されました：

background-image: url(~src/assets/images/foo.png)。

画像タグ：

<img src="assets/images/foo.jpg" />
3
Hieu Tran AGI

以下を使用してみてください：

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