web-dev-qa-db-ja.com

Angular CLIを使用し、CSSファイルで相対画像パスを使用できない

angularアプリをangular CLIを使用してセットアップし、componentsディレクトリにイメージを持つコンポーネントを作成しました。

例えば：

app/
---/common-components
------/header
---------/header.component.ts
---------/header.component.css
---------/images
--------------/image.png

CSSファイル内では、次のスタイルを使用しています。

.image {
    background-url: url('images/image.png');
}

アプリケーションを実行すると、304 Not Modifiedが表示され、プレビューでは画像が表示されません。絶対パス「/ src/app/common-components/header/images」を使用すると、ファイルは適切にロードされます。しかし、これは理想的ではありません。なぜなら、コンポーネントが自己充足的であることを望んでいるからです。

与えられる応答は次のとおりです。

Request URL:http://localhost:4201/images/test-image.jpeg
Request Method:GET
Status Code:304 Not Modified
Remote Address:127.0.0.1:4201

空白のプレビューで

angularwebpackangular-cli
18
glandrum101

すべての静的アセットファイル/ディレクトリは、angular-cli.jsonファイルにリストする必要があります。

資産を追加する

アセットを追加するには、次のいずれかを実行できます。

  • 画像ファイルをデフォルトのassetsフォルダー（angular-cli.jsonファイルに既にリストされています）に入れます。
  • または、app/内に新しいディレクトリを追加します（たとえば、app/imagesを使用し、angular-cli.jsonでそれを参照できます）

angular-cli.json：

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

ファイルを参照する

コメントで言及されている@ jali-aiのようにbackground-urlはbackground-imageである必要があり、次のようにアセットを参照できます。

.image {
   background-image: url('images/image.png'); 
}

angular-cli.jsonファイル および reference のアセットの例を次に示します

30
adriancarriger

それはまだ角度CLIとwebpack（1.0.3を使用）の問題のようです。

アセットフォルダーを_angular-cli.json_に追加し、パスを相対的に定義すると、ビルドは失敗し、ressources url('someRelativeLink')が見つかりません。

私は回避策を使用して、すべてのCSS定義を次の場所に配置しました。

_@Component({
  styles: [...]
})
_

styleUrlsファイルの代わり。

すべてが大丈夫だったことをdoinigした後。

3
ÐerÆndi
.image {
    background-image: url('./assets/images/image.png'); 
}
0
jaimin patel