Aurelia - 顯示靜態圖像

Question

我剛剛開始使用Aurelia，並且在運行我的應用程序（在開發中）時遇到了困難，包括靜態圖像。即我有一個img標記，其中一個src指向圖像位於我的文件夾結構中的位置，但在請求時我不斷獲得404。 我的圖像標記的src屬性中引用了位於我的應用程序根目錄中的圖像，但在運行我的應用程序時它不可用。

<div id="profile-pic"> 
    <img src="./profilepic.jpg" /> 
</div> 

我需要修改aurelia.json文件嗎？

Answer 1

圖像的URL是相對於頁面而不是您的視圖。因此，建立鏈接就好像你正在鏈接到那樣。通常，您的頁面是index.html，位於項目的根目錄，旁邊是src文件夾。因此，當您鏈接到位於src文件夾內的圖像時，必須在路徑中包含src。因此，以下目錄結構：

my-project 
|- index.html 
| 
\src 
|-app.js 
|-app.html 
|-profilepic.jpg 

將要求您在您的意見中使用<img src="src/profilepic.jpg" />。

這就是說，我會建議創建一個單獨的文件夾與其中的靜態圖像。這會很簡單地表明這些圖像不是應用程序源文件的一部分，但是支持圖像內容。您可以將該文件夾命名爲images，並將其放置在項目的根目錄中，旁邊還有src文件夾。

my-project 
|- index.html 
|\images 
| |-profilepic.jpg 
| 
\src 
|-app.js 
|-app.html 

然後你會在你的意見中使用<img src="images/profilepic.jpg" />。