2017-08-28 70 views
1

HTML文件不加載:形象角2

<div> 
     <img src="New-Google-Logo.png"/> 
    </div> 

這裏的新谷歌-Logo.png是在同一文件夾中的HTML文件。但ng服務後,HTML頁面加載其他細節,但不是圖像。試圖通過直接給圖像鏈接(如www.google.com/images/x.png),它的工作原理,但本地文件不加載。

文件夾樹:

src 
    -app 
    -logincomponent 
       - logincomponent.html 
       - logincomponent.css 
       - New-Google-Logo.png 
       - logincomponent.ts 
    -homecomponent 
       - homecomponent.html 
       - homecomponent.css 
       - homecomponent.ts 

這裏新-Google.png被內部logincomponent.html如上面給出稱作。

嘗試2:

src 
    -app 
    -logincomponent 
       - logincomponent.html 
       - logincomponent.css 
       - Images 
       - New-Google-Logo.png 
       - logincomponent.ts 

而在HTML簡稱,如:

<div> 
     <img src="./images/New-Google-Logo.png"/> 
</div> 

這些都沒有解決。

+0

你得到的任何錯誤安慰? – sol

+0

您可以添加文件夾樹 – Robert

+0

@ovokuro是的,我收到錯誤,如未能加載資源:在http:// localhost:4200/New-Google-Logo.png – Amal

回答

7

如果您正在使用angular-cli,那麼您的所有靜態資產應保存在資產文件夾中。然後,當你所服務的項目全部靜態資產需要被提供給客戶,以顯示它在客戶端,你應該給路徑

<div> 
     <img src="assets/images/New-Google-Logo.png"/> 
</div> 

。 Angular Cli構建並將整個項目捆綁在js文件中。爲了滿足您的靜態資產,你可以按照兩種方式

  • 把你所有的靜態資產,其中角CLI提供的默認.angular-cli.json
  • 資產的文件夾或你需要做靜態的條目在.angular-cli.json文件夾資產在陣列命名爲資產作爲我的圖片文件夾是靜態文件夾和文件夾的靜態在資產文件夾的同一層級

    "assets": [ "assets", "static/images" ] 
    
+0

我正在使用角度cli,但沒有使用資產。它是強制性的嗎?就像我前幾天使用相同的項目一樣,所有工作都很好。今天我重新安裝了cli,然後開始解決這個問題。請引導我通過如何糾正。 謝謝 – Amal

+0

當您爲項目提供服務時,所有靜態資產都需要提供給客戶端以便在客戶端上顯示。 Angular Cli構建並將整個項目捆綁在js文件中。要爲您的靜態資產提供服務,您可以採用以下兩種方式: - 將所有靜態資產放在角色cli服務的資產文件夾中。缺省情況下.angular-cli.json - 或者需要在.angular- CLI。命名爲資產數組JSON文件爲我的圖片文件夾是靜態文件和靜態文件夾是在資產的文件夾的同一層級 「資產」: 「資產」, 「靜態/圖像」 ] –

+0

我試圖使logincomponent文件夾中一個名爲images的文件夾,並將圖像放在那裏並嘗試使用,但沒有運氣。之後,它看起來像我在問題中的嘗試2部分添加。 – Amal