在ASP.NET Core + Angular 2上爲Visual Studio設置圖像路徑

我需要添加一個靜態圖像，如下所示。可以告訴我爲什麼我無法在主頁上顯示圖像，如下所示？即它不工作。在ASP.NET Core + Angular 2上爲Visual Studio設置圖像路徑

下面是關於它的好文章，從Steven Sanderson

\家\ home.component.html

<img src="{{heroImageUrl}}" style="height:30px">

home.component.ts

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'home', 
    template: require('./home.component.html') 
}) 
export class HomeComponent { 

    public heroImageUrl ="./image/employee_management.jpg"; 
}

錯誤：

它說，像這樣Failed to load resource: the server responded with a status of 404 (Not Found)。可能是我issue.how可以給它正確的路徑？圖像如上所示。

來源

2017-01-02 Sampath

那麼先生，這很容易，你可以直接在html中分配你的url src =「」。你不需要角2幫助。但如果你使用變量傳遞圖像認爲它是動態的，我認爲你應該使用絕對路徑。沒有硬的感覺 –

但它不工作不？可能是相對路徑問題否？ @AmitSuhag – Sampath

你使用的是webpack？使用絕對路徑。相對路徑將無法工作。您嘗試從./ < - 這意味着您正在從當前目錄進行檢查。從/ app開始我猜不知道你的應用程序結構。爲圖片創建separte文件夾資源 –

由於您使用的WebPack捆綁這些文件，你只需要使用require。您的打字稿代碼改成這樣：

public heroImageUrl = require("./image/employee_management.jpg");

...你就大功告成了。您現有的Webpack配置已經設置爲使用file-loader捆綁.jpg文件，因此require調用將返回捆綁映像的URL。

注：OP沒有提及，但他們使用的是ASP.NET核心+角2模板here，這所有的WebPack成立了。因此，這最終成爲一個Webpack問題，而不是一個有問題的問題，所以問題標題是誤導性的。

來源

2017-01-03 11:24:40

太棒了...非常感謝:)我更新了模板的詳細信息。 – Sampath

我與最新的模板有相同的問題，但此解決方案不適合我？當我使用require'self.parentView.context.require不是函數'時，我在模板中出現這個錯誤。而當我在組件中使用require時，會出現這個錯誤：「嚴重依賴：依賴的請求是表達式」。需要幫助，來吧史蒂夫 - 我知道你也可以幫助我。 :) –

-1

你應該使用

<img [attr.src]="heroImageUrl" style="height:30px">

或

<img attr.src="{{heroImageUrl}}" style="height:30px">

也確保path相對應。

Angular默認使用屬性綁定。要明確告訴Angular使用屬性綁定。

來源

2017-01-02 12:31:34

我不認爲'attr.'是必要的。 –

在某些情況下，我的圖像沒有加載，而是拋出錯誤，所以在這些情況下不適合使用'attr'這樣的建議。我不確定是否有必要使用'attr'或@GünterZöchbauer，如果你願意的話，你可以更新我的答案和澄清。 –

有趣的是你會得到什麼確切的錯誤。如果您使用'{{}}'綁定時發生錯誤，那麼您將會發現錯誤，因爲尚未設置值或類似值，因此尚未評估使用的表達式。 –

有兩點需要注意，src屬性，先用括號：

<img [src]="heroImageUrl " />

第二，確保圖像的URL相對於用來顯示組件路線的網址。因爲這通常不是做一件偉大的事情，我建議你把網址從應用程序的根絕：

public heroImageUrl ="/ClientApp/app/components/home/image/employee_management.jpg";

然後更好，但把它放在一個公共場所像/images/employee_management.jpg

來源

2017-01-02 12:31:43 Robba

這樣說，然後'失敗加載資源：服務器響應狀態爲404（Not Found）'。可能是路徑問題。我可以正確地給它嗎？圖像如上所示。 – Sampath

不工作。可能是我的相對路徑錯誤否？ – Sampath

將'src'放在括號中是沒有必要的。 OP的語法（'src =「{{heroImageUrl}}」）完全有效。問題是獲取正確的URL。 –

根據您的設置，您可能必須將靜態數據文件放在資源/資產文件夾中。

我的設置將我的網站的根目錄放入/src。我將角文件放在子文件夾/src/app中，如果我想鏈接到圖像，我將它們放在src的子文件夾中，名爲/src/assets。當鏈接的那些圖像，我簡單地寫的路徑，如同/src爲根，所以鏈接到稱爲employee_management.jpg的圖像將是

'assets/employee_management.jpg'

我使用Angular CLI順便說一句，它使用的WebPack捆綁這一切。

來源

2017-01-02 12:35:37

我沒有這樣的文件夾。我使用https://marketplace.visualstudio.com/items?itemName=MadsKristensen.ASPNETCoreTemplatePack – Sampath

將圖像文件夾包含在angular-cli中。在資產節點JSON像下面

"assets": [ 
     "assets", 
     "favicon.ico", 
     "fonts", 
     "images" 
     ],

來源

2017-01-02 13:04:36 Aniket

我沒有這樣的文件夾。我使用：https：// marketplace。 visualstudio.com/items?itemName=MadsKristensen.ASPNETCoreTemplatePack – Sampath

使用CLI時，我們需要將這些靜態文件添加到資產節點，以告訴Angular 2添加到部署文件夾。我看到你的圖像文件夾裏有employee_management.jpg文件。 – Aniket

是的，那麼相關路徑應該是什麼？ – Sampath

在ASP.NET Core + Angular 2上爲Visual Studio設置圖像路徑

回答

相關問題