我有一個項目,我試圖通過HTML文件中的img標籤添加圖像到一個組件,該圖像位於angularNode7Teste/thumbsup-jpg(應用程序根目錄夾)。組件文件位於angularNode7Teste/src/app文件夾中。圖像沒有通過img標籤加載到html
這裏是我的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>
正常呈現。
圖像在兩個標籤中都是相同的,我引用相同的圖像來查看它是否有效,但是沒有。
只能將資產文件夾內您的圖像?我試圖將資源文件夾中的圖像移動到app.component.html文件中,並且它可以工作,但是如果圖像不在該文件夾中,則不會重新渲染。 – William
@威廉是的,所有的資產都需要在該文件夾中。實際上,這可以從'.angular-cli.json'配置,請檢查'assets'屬性。配置模式可用[這裏](https://github.com/angular/angular-cli/wiki/angular-cli)。最終,應用程序將被構建,因此使用webpack捆綁css和js並將資產分開放置。進行生產時,您將執行「build --prod」,而'dist'文件夾將包含可放置在服務器上的構建版本。您可以檢查該文件夾的內容以查看是否適合您。 – andreim