2017-05-04 62 views
0

我有一個項目,我試圖通過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>正常呈現。

圖像在兩個標籤中都是相同的,我引用相同的圖像來查看它是否有效,但是沒有。

回答

1

index.html包含設置您的網址的基本路徑的<base href="/">元素。所以你需要檢查這個元素href的屬性值。 Angular使用此元素進行路由。

關於<img>如果src URL是相對然後將相對於在相對於<base>元件的href值。

關於CSS url() URL將相對於CSS文件。

實施例:

具有位於角CLI項目在src/assets/img/mypic.jpg的圖像。

然後這將工作<img src="assets/img/mypic.jpg" />

對於位於src/app/app.component.css的CSS文件中的以下將是有效的:

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

只能將資產文件夾內您的圖像?我試圖將資源文件夾中的圖像移動到app.component.html文件中,並且它可以工作,但是如果圖像不在該文件夾中,則不會重新渲染。 – William

+1

@威廉是的,所有的資產都需要在該文件夾中。實際上,這可以從'.angular-cli.json'配置,請檢查'assets'屬性。配置模式可用[這裏](https://github.com/angular/angular-cli/wiki/angular-cli)。最終,應用程序將被構建,因此使用webpack捆綁css和js並將資產分開放置。進行生產時,您將執行「build --prod」,而'dist'文件夾將包含可放置在服務器上的構建版本。您可以檢查該文件夾的內容以查看是否適合您。 – andreim