2017-08-04 7 views
0

angular-cli.jsonファイルには、資産を使用できるようにするapps/assetsキーがあります。アセットを宣言するには?

私がそこに置いたすべての画像を宣言でき、後で使用することができます。しかし、それは明らかにそれを行う方法ではありません、そうですか?

"WTFはこの仲間はビーイングの意味をコーディングしますか?"、あなたは今、私はここでは、想定している詳細に私の問題です:

.angular-cli.json:

"apps": [ 
    { 
     "root": "src", 
     "outDir": "dist", 
     "assets": [ 
     "assets", 
     "favicon.png" 
     ], 
     // Other things that do not matter 
    ], 

どこかのコードで:

<img src="assets/images/mycoolimage.png" alt="Johannes banannes">

(画像を含む)資産フォルダ:

src/assets/images/mycoolimage.png 

画像が見つからないという404メッセージが表示されます。 angular-cli.jsonを見ると、assetsというフォルダが宣言されています。これは、すべての資産を含めるべきではありませんか?例えばfavicon.pngは、次の任意の場所のコードのようなものを使用してアクセス可能である:

<img src="favicon.png">

「資産」がassetsセクション(角-cli.json)で宣言されている場合は、そのコンテンツが利用可能であるべきではありませんどこでも以下のようなものを使用して:

<img src="assets/images/mycoolimage.png">

すべてのヘルプは高く評価されています。これは、行く答えを追加して自由に感じるための方法ではありません場合は

Screen

+0

この方法で画像を取得できるはずです。ファビコンは、出力フォルダのルートディレクトリ、つまり/dist/favicon.icoにコンパイルされるため、特別なケースです。 'ng serve 'をやっているときや' lite-server'のようなものをコンパイルして提供しているときに404を取得していますか?あなたの 'base_href'は何に設定されていますか? – joh04667

+0

画像の相対パスを使用してください。 – Faisal

+0

例:あなたのcomponent.htmがsrc/app/folderの下にある場合は、コンポーネントのイメージをJohannes banannes ...に設定します。angle-cliはビルド後のパスを処理します。 – Faisal

答えて

0

EDIT:はここに私のフォルダ構造を示すスクリーンショットです。あなたのソリューションが私よりも良い方法なら、私はそれを受け入れます。 .angular-cli.json

、私は次の行を追加:それは私のイメージへのアクセスを与えた

"apps": [ 
    { 
     "root": "src", 
     "outDir": "dist", 
     "assets": [ 
     "assets", 
     "assets/images", //<<<--- This line 
     "favicon.png" 
     ], 
     // Other things that do not matter 
    ], 

を。宣言された「資産」のみが機能しなかった。それは、角度がサブファイルのみを含むように見えますが、サブフォルダは含まないようです。

関連する問題