イメージはHTMLのimgタグで読み込まれていません

Question

私はプロジェクトがあり、htmlファイルのimgタグを使ってコンポーネントに画像を追加しようとしています。これはangularNode7Teste/thumbsup-jpgフォルダ）。コンポーネントファイルはangularNode7Teste/src/appフォルダにあります。ここで

は私のapp.component.htmlからのコードです：

<h1> 
{{title}} 
</h1> 

<input type="button" class="btn btn-default" value="Send" > 
<img src="../../thumbs-up.jpg"/> 
<div class="image"></div> 

これはapp.component.cssファイルです：

div.image { 
    content: url(../../thumbs-up.jpg); 
} 

画像<img src="../../thumbs-up.jpg"/>でrenderizeしませんが、 divタグ<div class="image"></div>が正常にレンダリングされています。

イメージは両方のタグで同じですが、同じイメージを参照して動作するかどうかを確認していますが、そうではありません。

Answer 1

角index.htmlには、URLの基本パスを設定する<base href="/">要素が含まれています。したがって、この要素hrefの属性値をチェックする必要があります。 Angularは、ルーティングの目的でこの要素を使用します。 <img>に関して

：src URLは、次に<base>要素のhref値に対する相対あろう相対的なものである場合。

CSS url()：については、URLはCSSファイルを基準にしています。

例：

src/assets/img/mypic.jpgでの角度CLIのプロジェクトにあるイメージを持ちます。

これは<img src="assets/img/mypic.jpg" />で動作します。

src/app/app.component.cssにあるCSSファイルについては、以下が有効になります。

.pic { 
    background-image: url('../assets/img/mypic.jpg'); 
    width: 256px; 
    height: 256px; 
}